html,
      body {
        -webkit-font-smoothing: antialiased;
        height: 100%;
        margin: 0;
        user-select: none; 
        background-color: var(--tg-theme-bg-color);
        /* container: var(--tg-color-scheme) / inline-size;  */
      }
      body {
        overflow: hidden;
      }
      .react-no-select {
        user-select: none; 
      }
      
      .overflow-auto {
        overflow: auto;
      }
      .invisible {
        visibility: hidden;
      }
      #root {
        display: flex;
        height: 100%;
        flex: 1;
      }
      img {
        pointer-events: none;
        user-select: none;
      }
      .overlay {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
        user-select: none;
      }

body.pointerDisabled #pointerDisabled {
    pointer-events: none !important;
}

div::-webkit-scrollbar {
    width: 3px;
}

div::-webkit-scrollbar-track {
    background: transparent;
}

div::-webkit-scrollbar-thumb {
    background: #4444443f;
    border-radius: 1.5px;
}

div::-webkit-scrollbar-thumb:hover {
    background: #555555;
} 

/* Ribbon */
.ribbon {
    position: relative;
    width: 100%;
    margin: 0;
}

.ribbon:before,
.ribbon i:before {
    content: '';
    position: absolute;
    bottom: -21px;
    border: 24px solid #c45045;
}

.ribbon:before {
    left: -52px;
    border-left-color: transparent;
    transform: rotate(-11deg);
}

.ribbon i:before {
    right: -52px;
    border-right-color: transparent;
    transform: rotate(11deg);
    z-index: -1;
}

.ribbon i:after,
.ribbon u:after {
    content: '';
    position: absolute;
    border-style: solid;
    bottom: -11px;
    z-index: 0;
}

.ribbon i:after {
    right: -11px;
    border-color: transparent transparent transparent #a33d33;
    border-width: 0 0 11px 11px;
}


.ribbon.no-bg:after {
    background: transparent!important;
}

.ribbon.no-bg u:before, .ribbon.no-bg:after {
    height: 0!important;

}
.ribbon u:after {
    left: 0;
    border-color: transparent #a33d33 transparent transparent;
    border-width: 0 11px 11px 0;
}

.ribbon u {
    display: block;
    position: relative;
    width: 100%;
    left: -11px;
    padding: 0 11px 11px;
    background: #d0726a;
    background-image: linear-gradient(#d0726a, #c7574d);
    border-top-left-radius: 50% 11px;
    border-top-right-radius: 50% 11px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(163, 61, 51, .8), 0 2px 1px rgba(163, 61, 51, .6);
}

.ribbon u {
    left: 0;
    margin: 0 -11px;
    width: auto;
}

.ribbon u::selection { background-color: #a33d33; }
.ribbon u::-moz-selection { background-color: #a33d33; }

.ribbon u:before,
.ribbon:after {
    content: '';
    position: absolute;
    height: 11px;
    left: 0;
    bottom: 0;
    border-top-left-radius: 50% 11px;
    border-top-right-radius: 50% 11px;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3);
}

.ribbon u:before {
    width: 100%;
    background: #a33d33;
}

.ribbon:after {
    width: 100%;
    background: #ded8c5;
    z-index: 1;
}

/* green  */
.green.ribbon:before,
.green.ribbon i:before {
    border-color: #4CAF50; /* Green */
}

.green.ribbon i:after {
    border-color: transparent transparent transparent #388E3C; /* Darker green */
}

.green.ribbon u:after {
    border-color: transparent #388E3C transparent transparent; /* Darker green */
}

.green.ribbon u {
    background: #66BB6A; /* Lighter green */
    background-image: linear-gradient(#66BB6A, #4CAF50); /* Gradient from lighter to green */
    text-shadow: 0 1px 1px rgba(9, 71, 10, 0.8), 0 2px 1px  rgba(7, 55, 8, 0.6);
}

.green.ribbon u::selection { background-color: #388E3C; } /* Darker green */
.green.ribbon u::-moz-selection { background-color: #388E3C; } /* Darker green */

.green.ribbon u:before {
    background: #388E3C; /* Darker green */
}

/* blue */
.blue.ribbon:before,
.blue.ribbon i:before {
    border-color: #2196F3; /* Blue */
}

.blue.ribbon i:after {
    border-color: transparent transparent transparent #1976D2; /* Darker blue */
}

.blue.ribbon u:after {
    border-color: transparent #1976D2 transparent transparent; /* Darker blue */
}

.blue.ribbon u {
    background: #64B5F6; /* Lighter blue */
    background-image: linear-gradient(#64B5F6, #2196F3); /* Gradient from lighter to blue */
    text-shadow: 0 1px 1px rgba(51, 59, 61, 0.8), 0 2px 1px  rgba(51, 59, 61, 0.6);
}

.blue.ribbon u::selection { background-color: #1976D2; } /* Darker blue */
.blue.ribbon u::-moz-selection { background-color: #1976D2; } /* Darker blue */

.blue.ribbon u:before {
    background: #1976D2; /* Darker blue */
}

/* secondary */

.secondary.ribbon:before,
.secondary.ribbon i:before {
    border-color: #97714A; /* Brown */
}

.secondary.ribbon i:after {
    border-color: transparent transparent transparent #886644; /* Darker brown */
}

.secondary.ribbon u:after {
    border-color: transparent #886644 transparent transparent; /* Darker brown */
}

.secondary.ribbon u {
    background: #A58362; /* Lighter brown */
    background-image: linear-gradient(#A58362, #97714A); /* Gradient from lighter to brown */
    text-shadow:  0 1px 1px rgba(116, 82, 48, 0.8),  0 2px 1px rgba(116, 82, 48, 0.6);
}

.secondary.ribbon u::selection { background-color: #886644; } /* Darker brown */
.secondary.ribbon u::-moz-selection { background-color: #886644; } /* Darker brown */

.secondary.ribbon u:before {
    background: #886644; /* Darker brown */
}

/* secondary */
.primary.ribbon:before,
.primary.ribbon i:before {
    border-color: #656E7B; /* Gray */
}

.primary.ribbon i:after {
    border-color: transparent transparent transparent #5B636F; /* Darker gray */
}

.primary.ribbon u:after {
    border-color: transparent #5B636F transparent transparent; /* Darker gray */
}

.primary.ribbon u {
    background: #747E8D; /* Lighter gray */
    background-image: linear-gradient(#747E8D, #656E7B); /* Gradient from lighter to gray */
    text-shadow: 0 1px 1px rgba(51, 59, 61, 0.8), 0 2px 1px  rgba(51, 59, 61, 0.6);
}

.primary.ribbon u::selection { background-color: #5B636F; } /* Darker gray */
.primary.ribbon u::-moz-selection { background-color: #5B636F; } /* Darker gray */

.primary.ribbon u:before {
    background: #5B636F; /* Darker gray */
}


.tooltip {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 200px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: -100px;
    opacity: 0.8;
    pointer-events: none !important;
    transform: translateZ(0);
}

.tooltip.tooltip-player {
    bottom: -8px;
}

.tooltip.tooltip-player > .tooltip-content {
    background: none!important;
    border: none!important;
    box-shadow: none!important;
}

.tooltip.tooltip-player:after {
    display: none!important;
}

.tooltip-content {
    display: flex;
    flex-direction: column;
    padding: 4px 7px;
    border-radius: 5px;
    background: #97714a;
    border: 2px solid #97714a;
    box-shadow: inset 0 0 5px #b98e63, 0 2px 7px #b98e6366;
}

.tooltip-content-player-action {
    pointer-events: auto !important;
    background: #f7f0e9;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.tooltip-content-player-action:hover {
    animation: pulse-glow 1.2s ease-in-out infinite;
}

.tooltip-content-icon-action {
    pointer-events: auto !important;
    background: #f7f0e9;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.tv-default {
    background: #f7f0e9;
}

.tv-primary {
    background: #e7e0dad2;
}

.tooltip-content-icon-action-active {
    pointer-events: none !important;
    background: #f7f0e9;
}

@keyframes pulse-glow {
    0% {
        box-shadow: inset 0 0 6px #cfa97b, 0 4px 12px #b98e63aa;
    }
    50% {
        box-shadow: inset 0 0 8px #e2be93, 0 5px 15px #d5a773cc;
    }
    100% {
        box-shadow: inset 0 0 6px #cfa97b, 0 4px 12px #b98e63aa;
    }
}

.tooltip-content-icon-action:hover {
    transform: scale(1.05);
    animation: pulse-glow 1.2s ease-in-out infinite;
}

.tooltip-content-active {
    pointer-events: auto !important;
}

.no-bottom-arrow:after {
    opacity: 0!important;
}

.tooltip:after {
    content:'';
    position:absolute;
    left:50%;
    margin-left: -20px; 
    bottom:-15px;
    
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
    border-top: 20px solid #97714a;
}

.tooltip.small {
    height: 90px;
}

.tooltip-content.small {
    display: flex;
    flex-direction: column;
    padding: 3px 6px;
    border-radius: 5px;
    background: #97714a;
    border: 2px solid #97714a;
    box-shadow: inset 0 0 5px #b98e63, 0 2px 7px #b98e6366;
}

.tooltip.small:after {
    content:'';
    position:absolute;
    left:50%;
    margin-left: -10px; 
    bottom:-7.5px;
    
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    
    border-top: 10px solid #97714a;
}

.tooltip.small-icon:after {
    content:'';
    position:absolute;
    left:50%;
    margin-left: -10px; 
    bottom:-8px;
    
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    
    border-top: 10px solid #97704ac1;
}

.traveling-rainbow {
    height: 100vh;
    width: 0;
    top: 0;
    position: absolute;
    transform: rotate(10deg);
    transform-origin: top right;
    opacity: 0.3;
  }
  .traveling-rainbow:nth-child(1) {
    box-shadow: -130px 0 80px 40px transparent, -50px 0 50px 25px #e879f9, 0 0 50px 25px #60a5fa, 50px 0 50px 25px #5eead4, 130px 0 80px 40px transparent;
    animation: 24.1s linear infinite slide;
    animation-delay: -1.8s;
  }
  .traveling-rainbow:nth-child(2) {
    box-shadow: -130px 0 80px 40px transparent, -50px 0 50px 25px #e879f9, 0 0 50px 25px #5eead4, 50px 0 50px 25px #60a5fa, 130px 0 80px 40px transparent;
    animation: 23.2s linear infinite slide;
    animation-delay: -6.6s;
  }
  .traveling-rainbow:nth-child(3) {
    box-shadow: -130px 0 80px 40px transparent, -50px 0 50px 25px #60a5fa, 0 0 50px 25px #5eead4, 50px 0 50px 25px #e879f9, 130px 0 80px 40px transparent;
    animation: 22.3s linear infinite slide;
    animation-delay: -15.4s;
  }
  @keyframes slide {
    from {
      right: -25vw;
    }
    to {
      right: 125vw;
    }
  }
  .traveling-rainbow-h {
    box-shadow: 0 0 50vh 40vh #000;
    width: 100vw;
    height: 0;
    bottom: 0;
    left: 0;
    position: absolute;
  }
  .traveling-rainbow-v {
    box-shadow: 0 0 35vw 25vw #000;
    width: 0;
    height: 100vh;
    bottom: 0;
    left: 0;
    position: absolute;
  }

.text-character-animation {
    opacity: 0;
    animation: fadeIn 0.5s forwards;
}

.text-character-animation-invisible {
    opacity: 0;
    animation: fadeInInvisible 0.5s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeInInvisible {
    0% {
        opacity: 0;
        position: absolute;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        position: relative;
    }
}

@keyframes gradient {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
	100% {
		opacity: 1;
	}
}

  #fire-container {
    display: flex;
    filter: blur(0.4px);
    -webkit-filter: blur(0.4px);
    position: relative;
    width: 150px;
    height: 30px;
  }
  
  #fire-container div {
      animation: rise 3s ease-in infinite;
      background-image: radial-gradient(#ff5000 30%,rgba(255,80,0,0) 70%);
      border-radius: 50%;
      mix-blend-mode: screen;
      opacity: 0;
      position: absolute;
      bottom: 0;
      width: 40px;
      height: 40px;
  }
  
  @keyframes rise {
      from {
          opacity: 0;
          transform: translateY(0) scale(1);
      }
      25% {
          opacity: 1;
      }
      to {
          opacity: 0;
          transform: translateY(-40px) scale(0);
      }
  }

  #stats > div {
    left: 50% !important;
  }