:root{
  --glass-bg:rgba(0, 0, 0, 0.5);
  --glass-border:rgba(255, 255, 255, 0.08);
  --text-primary:#ffffff;
  --text-secondary:#b0b0b0;
  --primary-orange:#ff6f00;
  --hover-orange:#ff8f00;
  --accent-color:#6366f1;
  --accent-hover:#4f46e5;
  --border-color:#404040;
  --border-radius:12px;
  --transition:all 0.3s ease;
  --background-dark:#0a0a0a;
  --blur:blur(12px);
  --overlay-bg:rgba(0, 0, 0, 0.8);
  --bg-tertiary:rgba(45, 45, 45, 0.8);
  --warning-color:#f97316;
  --border-color-form:#404040;
  --border-radius-form:12px;
  --bg-secondary:rgba(26, 26, 26, 0.7);
  --ck-color-base-border:#4d4d6b;
  --ck-color-toolbar-background:transparent;
  --ck-color-toolbar-border:#4d4d6b;
  --ck-color-text:#e0e0e0;
  --ck-color-button-on-color:#03dac6;
  --ck-color-dropdown-panel-border:#4d4d6b;
  --ck-color-focus-border:rgba(255, 255, 255, 0.5);
  --ck-color-input-background:rgba(255, 255, 255, 0.1);
  --ck-color-input-text:#e0e0e0;
  --ck-color-labeled-field-label-background:#252538;
  --ck-color-link-actions-background:#252538;
  --ck-color-link-form-background:#252538;
  --ck-border-radius:8px;
  --danger-color:#dc2626;
  --danger-bg:rgba(220, 38, 38, 0.1);
  --success-color:#16a34a;
  --ck-color-base-background:rgba(0, 0, 0, 0.4);
  --ck-color-button-default-background:transparent;
  --ck-color-button-default-hover-background:rgba(255, 255, 255, 0.1);
  --ck-color-button-on-background:rgba(255, 255, 255, 0.2);
  --ck-color-button-on-hover-background:rgba(255, 255, 255, 0.3);
  --ck-color-dropdown-panel-background:rgba(0, 0, 0, 0.7);
  --ck-color-input-border:rgba(255, 255, 255, 0.2);
  }

 * {
  margin: 0;
   padding: 0;
   box-sizing: border-box;
   scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.5);
  }
  
  body {

  }

  .profile {   animation: fadeIn 1s ease-in-out;}
  .profile_adds {   animation: fadeIn 1s ease-in-out;}
  .actiontab {  animation: fadeIn 1s ease-in-out;}

 .video-play-button-container {
  display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 75px;
  }

 .video-play-button-wrapper {
  position: relative;
   width: 200px;
   height: 200px;
   cursor: pointer;
   transition: transform 0.3s ease;
  }

 .video-play-button-wrapper:hover {
  transform: scale(1.05);
  }

 .video-play-button-wrapper .light-effect {
  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
  }

 .js-animate-on-scroll.is-visible .video-play-button-wrapper .light-effect {
  animation: rotateEffect 5s linear infinite;
  }

 .video-play-button-wrapper .main-button-img {
  width: 100%;
   height: 100%;
  }

 @keyframes rotateEffect {
  from {
  transform: rotate(0deg);
  }

 to {
  transform: rotate(-360deg);
  }

}

 .video-modal-overlay {
  display: none;
   opacity: 0;
   position: fixed;
   z-index: 2000;
   inset: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.85);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   justify-content: center;
   align-items: center;
   transition: opacity 0.3s ease-in-out;
  }

 .video-modal-overlay.is-visible {
  opacity: 1;
  }

 .video-modal-content {
  position: relative;
   width: 90vw;
   max-width: 960px;
   transform: scale(0.95);
   opacity: 0;
   transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }

 .video-modal-overlay.is-visible .video-modal-content {
  transform: scale(1);
   opacity: 1;
  }

 .video-modal-content iframe {
  display: block;
   width: 100%;
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
   aspect-ratio: 16 / 9;
  }

 .video-modal-close-btn {
  position: absolute;
   top: -15px;
   right: -15px;
   width: 40px;
   height: 40px;
   background: #fff;
   color: #333;
   font-size: 28px;
   font-weight: bold;
   line-height: 40px;
   text-align: center;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  }

 .video-modal-close-btn:hover {
  transform: scale(1.1) rotate(90deg);
   background: #FFD700;
   color: #000;
  }

 @media (max-width: 768px) {
  .video-play-button-container {
  margin-top: 30px;
  }

 .video-play-button-wrapper {
  width: 120px;
   height: 120px;
  }

 .video-modal-close-btn {
  width: 35px;
   height: 35px;
   line-height: 35px;
   font-size: 24px;
   top: -10px;
   right: 0;
  }

}

 .carousel-container {
  max-width: 700px;
   margin: 0 auto;
   padding: 0 15px;
   position: relative;
   overflow: hidden;
  }

 .carousel {
  display: flex;
   width: 100%;
   transition: transform 0.5s ease-in-out;
   will-change: transform;
  }

 .contimer {
  flex: 0 0 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: url('feature02.png') no-repeat center center;
   background-size: contain;
   background-position: center;
   border-radius: 15px;
   padding: 15px;
   width: 500px;
   height: 205px;
   max-width: 100%;
   margin: 20px auto;
   font-family: 'RuneFont', 'Cinzel', serif;
   position: relative;
   overflow: hidden;
   box-sizing: border-box;
  }

 .carousel .contimer:nth-child(2) {
  background: url('feature03.png') no-repeat center center;
   background-size: contain;
   background-position: center;
  }

 .contimer::before {
  content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
  }

 .js-animate-on-scroll.is-visible .contimer::before {
  animation: shimmer 4s infinite;
  }

 .contimer a {
  color: #ffd700;
   font-size: 1.2rem;
   font-weight: 700;
   text-transform: uppercase;
   text-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
   margin-bottom: 10px;
   text-align: center;
   text-decoration: none;
   background: rgb(0 0 0 / 71%);
   padding: 5px 10px;
   border-radius: 6px;
  }

 .js-animate-on-scroll.is-visible .contimer a {
  animation: glow 2s ease-in-out infinite;
  }

 #timer {
  color: #ffffff;
   font-size: 2.4rem;
   font-weight: bold;
   letter-spacing: 2px;
   background: rgb(0 0 0 / 71%);
   padding: 8px 15px;
   border-radius: 8px;
   border: 2px solid #ffeb00;
   text-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
   text-align: center;
  }

 #seconds {
  display: inline-block;
  }

 .js-animate-on-scroll.is-visible #seconds {
  animation: subtle-pulse 1s ease-in-out infinite;
  }

 .server_status, .server-online {
  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
  }

 .online-text {
  color: #ffffff;
   font-size: 1.2rem;
   font-weight: bold;
   text-align: center;
   margin-bottom: 8px;
   background: rgb(0 0 0 / 71%);
   padding: 5px 10px;
   border-radius: 6px;
   text-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
  }

 .online-dot {
  width: 10px;
   height: 10px;
   background-color: #00ff88;
   border-radius: 50%;
   display: inline-block;
   margin-right: 5px;
   vertical-align: middle;
  }

 .carousel-indicators {
  display: flex;
   justify-content: center;
   position: absolute;
   bottom: 10px;
   width: 100%;
   z-index: 10;
  }

 .indicator_carousel {
  width: 35px;
   height: 35px;
   background: url('zyjsdot.png') no-repeat center center;
   background-size: contain;
   margin: 0 5px;
   cursor: pointer;
   transition: transform 0.3s;
  }

 .indicator_carousel.active {
  background: url('zyjsdot_h.png') no-repeat center center;
   background-size: contain;
   transform: scale(1.3);
  }

 @keyframes shimmer {
  0% {
  left: -100%;
  }

 50% {
  left: 100%;
  }

 100% {
  left: 100%;
  }

}

 @keyframes glow {
  0% {
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 215, 0, 0.4);
  }

 50% {
  text-shadow: 0 0 15px rgba(0, 0, 0, 1), 0 0 30px rgba(255, 215, 0, 0.6);
  }

 100% {
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 215, 0, 0.4);
  }

}

 @keyframes subtle-pulse {
  0% {
  transform: scale(1);
   text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
  }

 50% {
  transform: scale(1.03);
   text-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
  }

 100% {
  transform: scale(1);
   text-shadow: 0 0 5px rgba(0, 255, 136, 0.5);
  }

}

 @media (max-width: 550px) {
  .carousel-container {
  padding: 0 10px;
  }

 .contimer {
  padding: 10px;
   width: 100%;
   height: auto;
   aspect-ratio: 500 / 205;
   margin: 10px auto;
  }

 .contimer a, .online-text {
  font-size: 0.8rem;
   margin-bottom: 8px;
   padding: 4px 8px;
  }

 #timer {
  font-size: 1.3rem;
   padding: 6px 12px;
  }

 .indicator_carousel {
  width: 30px;
   height: 30px;
  }

}

 @media (max-width: 400px) {
  .carousel-container {
  padding: 0 5px;
  }

 .contimer {
  padding: 6px;
   margin: 6px auto;
  }

 .contimer a, .online-text {
  font-size: 0.8rem;
   margin-bottom: 6px;
   padding: 3px 6px;
  }

 #timer {
  font-size: 1.3rem;
   padding: 5px 10px;
  }

 .indicator_carousel {
  width: 25px;
   height: 25px;
  }

}

 .textinfo h2 {
  text-shadow: 0 0 3px #000000bf, 0 0 6px #FFA500;
   text-align: center;
   padding: 10px 30px;
   font-size: 2.3em;
  }

 @media (max-width: 600px) {
  .textinfo h2 {
  font-size: 1.3em;
   text-shadow: 0 0 2px #000000bf, 0 0 4px #FFA500;
   padding: 10px 20px;
  }

}

 .dwnl_btns {
  display: flex;
   justify-content: center;
   align-items: center;
  }

 .download-container {
  display: flex;
   align-items: center;
   gap: 25px;
   padding: 12px;
   border-radius: 20px;
   backdrop-filter: blur(15px);
   background: rgba(255, 255, 255, 0.1);
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(255, 255, 255, 0.3);
   transition: transform 0.3s ease;
  }

 .download-container:hover {
  transform: scale(1.02);
  }

 .qr-code {
  width: min(20vw, 140px);
   height: min(20vw, 140px);
   min-width: 80px;
   min-height: 80px;
   aspect-ratio: 1 / 1;
  }

 .buttons {
  display: flex;
   flex-direction: column;
   gap: 18px;
  }

 .buttons a {
  text-decoration: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   font-weight: 600;
   font-size: 16px;
   color: black;
   background-image: url('button_1.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   width: 419px;
   height: 80px;
   transition: all 0.25s ease;
  }

 .buttons a img {
  width: 28px;
   height: 28px;
  }

 .buttons a:hover {
  transform: translateY(-3px);
   opacity: 0.9;
  }

 @media (max-width: 768px) {
  .download-container {
  gap: 20px;
   padding: 8px;
  }

 .qr-code {
  width: min(25vw, 100px);
   height: min(25vw, 100px);
   min-width: 70px;
   min-height: 70px;
  }

 .buttons a {
  width: 200px;
   height: 50px;
   background-size: 200px 50px;
   font-size: 14px;
  }

 .buttons a img {
  width: 24px;
   height: 24px;
  }

}

 @media (max-width: 300px) {
  .download-container {
  flex-direction: column;
  }

 .qr-code {
  width: min(30vw, 80px);
   height: min(30vw, 80px);
   min-width: 60px;
   min-height: 60px;
  }

 .buttons a {
  width: 180px;
   height: 45px;
   background-size: 180px 45px;
   font-size: 13px;
  }

 .buttons a img {
  width: 22px;
   height: 22px;
  }

}

 .slider-section {
  width: 100%;
   margin: auto;
   margin-top: 20px;
  }

 .swiper {
  width: 100%;
   min-height:40vh;
  }

 .swiper-slide {
  position: relative;
  }

 .slide-image {
  position: relative;
   display: inline-block;
  }

 .slide-image img {
  display: block;
   width: 100%;
   height: auto;
  }

 .slide-image .title {
  position: absolute;
   top: 23%;
   left: 59%;
   transform: translate(-50%, 0);
  }

 .slide-image .desc {
  position: absolute;
   bottom: 43%;
   left: 68%;
   transform: translate(-50%, 0);
  }

 .slide-image h2 {
  position: absolute;
   top: 12%;
   left: 60%;
   transform: translateX(-50%);
   margin: 0;
   color: white;
   font-size: 1.5rem;
   padding: 6px 12px;
   border-radius: 6px;
  }

 .slide-image p {
  position: absolute;
   bottom: 15%;
   left: 60%;
   transform: translateX(-50%);
   margin: 0;
   max-width: 35%;
   color: white;
   padding: 1px 1px;
   border-radius: 6px;
   font-size: 1rem;
  }

 .slider1-buttons {
  display: flex;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 10px;
   gap: 28px;
  }

 .slider1-buttons .btn-wrapper {
  text-align: center;
   cursor: pointer;
  }

 .slider1-buttons img {
  width: 50px;
   height: 50px;
   object-fit: contain;
   transition: transform 0.3s ease;
  }

 .slider1-buttons .btn-title {
  margin-top: 6px;
   font-size: 0.9rem;
   color: #fff;
   font-weight: 600;
  }

 .slider1-buttons .active img {
  transform: scale(1.2);
   filter: drop-shadow(0 0 10px #ffcc00) drop-shadow(0 0 20px #ffcc00);
  }

 .js-animate-on-scroll.is-visible .slider1-buttons .active img {
  animation: pulse 3.5s infinite;
  }

 @keyframes pulse {
  0% {
  transform: scale(1.2);
   filter: drop-shadow(0 0 10px #ffcc00);
  }

 50% {
  transform: scale(1.3);
   filter: drop-shadow(0 0 20px #ffcc00) drop-shadow(0 0 30px #ffaa00);
  }

 100% {
  transform: scale(1.2);
   filter: drop-shadow(0 0 10px #ffcc00);
  }

}

 .slider-header {
  text-align: center;
   margin-bottom: 20px;
   margin-top: 20px;
  }

 .slider-header img {
  max-width: 100%;
   height: auto;
  }

 @media (max-width: 600px) {
  .swiper {
  height: 200px;
  }

 .slide-image .title {
  top: 20%;
   left: 64%;
  }

 .slide-image .desc {
  bottom: 0%;
   left: 67%;
  }

 .slide-image h2 {
  font-size: 0.6rem;
  }

 .slide-image p {
  font-size: 0.5rem;
  }

 .slider1-buttons {
  margin-top: 5px;
   gap: 8px;
  }

 .slider1-buttons img {
  width: 40px;
   height: 40px;
  }

 .slider1-buttons .btn-title {
  font-size: 0.6rem;
  }

}

 .content_area {
  width: 100%;
   max-width: 1000px;
   margin: auto;
   position: relative;
   overflow: hidden;
  }

 .slider-wrapper {
  position: relative;
   width: 100%;
   overflow: hidden;
  }

 .slider {
  display: flex;
   transition: transform 0.8s ease-in-out;
   width: 100%;
  }

 .slide {
  flex: 0 0 100%;
   position: relative;
   aspect-ratio: 1807 / 935;
  }

 .slide-inner {
  position: absolute;
   top: 50%;
   left: 50%;
   width: 89.6%;
   height: 97.5%;
   transform: translate(-50%, -50%);
   z-index: 1;
  }

 .slide-visual {
  width: 100%;
   height: 100%;
   -webkit-mask: url("swiper-img-mask.png") no-repeat center / 100% 100%;
   mask: url("swiper-img-mask.png") no-repeat center / 100% 100%;
  }

 .slide-visual img {
  width: 100%;
   height: 100%;
   object-fit: cover;
  }

 .slide::after {
  content: "";
   position: absolute;
   inset: 0;
   background: url("border-swiper.png") no-repeat center / 100% 100%;
   z-index: 2;
   pointer-events: none;
  }

 .slide-text {
  position: absolute;
   bottom: 5%;
   left: 5%;
   right: 5%;
   z-index: 3;
   backdrop-filter: blur(6px);
   color: #fff;
   padding: 2%;
   border-radius: 10px;
   font-size: clamp(12px, 1.5vw, 16px);
   animation: fadeIn 1s ease;
   box-sizing: border-box;
  }

 .slide-text h3, .slide-text p, .slide-text ul {
  margin: 5px 0;
  }

 @keyframes fadeIn {
  from {
  opacity: 0;
   transform: translateY(20px);
  }

 to {
  opacity: 1;
   transform: translateY(0);
  }

}

 .slide-text h3 {
  margin: 5px 0;
   color: #FFD700;
   font-weight: bold;
   position: relative;
   overflow: hidden;
  }

 .slide-text h3::after {
  content: "";
   position: absolute;
   top: 0;
   left: -75%;
   width: 50%;
   height: 100%;
   background: linear-gradient(120deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.1) 100%);
  }

 .js-animate-on-scroll.is-visible .slide-text h3::after {
  animation: shine 6s infinite;
  }

 @keyframes shine {
  0% {
  left: -75%;
  }

 50% {
  left: 125%;
  }

 100% {
  left: 125%;
  }

}

 .prev, .next {
  position: absolute;
   top: 47%;
   transform: translateY(-50%);
   width: 40px;
   height: 60px;
   background-size: cover;
   background-position: center;
   cursor: pointer;
   z-index: 4;
  }

 .prev {
  left: 15px;
   background-image: url("leftbtn.png");
  }

 .next {
  right: 15px;
   background-image: url("rightbtn.png");
  }

 .slide-indicators {
  display: flex;
   justify-content: center;
   margin-top: 15px;
  }

 .indicator {
  width: 12px;
   height: 12px;
   background: #ccc;
   margin: 0 5px;
   border-radius: 50%;
   cursor: pointer;
   transition: background 0.3s;
  }

 .indicator.active {
  background: #fff;
  }

 @media (max-width: 768px) {
  .slide-text {
  font-size: 8px;
   padding: 2px;
  }

 .slide-text h3 {
  font-size: 11px;
  }

 .prev, .next {
  display: none;
  }

}

 .screenshot-slider {
  position: relative;
   overflow: hidden;
   max-width: 900px;
   margin: 20px auto 5px;
   box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  }

 .screenshot-slider__track {
  display: flex;
   transition: transform 0.6s ease-in-out;
  }

 .screenshot-slider__slide {
  min-width: 100%;
   user-select: none;
   border: 2px solid #dbbe5e;
   box-sizing: border-box;
  }

 .screenshot-slider__slide img {
  width: 100%;
   height: auto;
   display: block;
  }

 .screenshot-slider__nav {
  position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   border: none;
   background: transparent no-repeat center/contain;
   cursor: pointer;
   z-index: 10;
  }

 .screenshot-slider__prev {
  left: 15px;
   background-image: url("leftbtn.png");
  }

 .screenshot-slider__next {
  right: 15px;
   background-image: url("rightbtn.png");
  }

 .screenshot-slider__dots {
  margin-top: 2px;
   margin-bottom: 12px;
   display: flex;
   justify-content: center;
   gap: 12px;
  }

 .screenshot-slider__dots button {
  width: 28px;
   height: 28px;
   border: none;
   background: url("zyjsdot.png") no-repeat center;
   background-size: contain;
   cursor: pointer;
   padding: 0;
   transition: transform 0.3s;
  }

 .screenshot-slider__dots button.active {
  background-image: url("zyjsdot_h.png");
   transform: scale(1.3);
  }

 @media (max-width: 768px) {
  .screenshot-slider {
  max-width: 90%;
   margin: 20px auto 5px;
  }

 .screenshot-slider__nav {
  display: none;
  }

}

 .footer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
   color: #e0e6ed;
   padding: 2rem 1rem;
   box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
   position: relative;
   overflow: hidden;
  }

 .footer::before {
  content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, #4a90e2, transparent);
  }

 .footer-container {
  max-width: 1200px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 1.5rem;
  }

 .footer-text {
  font-size: 0.9rem;
   line-height: 1.6;
   color: #b8c5d1;
   max-width: 800px;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

 .footer-buttons {
  display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
  }

 .footer-button {
  background: transparent;
   color: #4a90e2;
   border: 2px solid #4a90e2;
   padding: 0.75rem 1.5rem;
   border-radius: 8px;
   font-size: 0.85rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
   text-decoration: none;
  }

 .footer-button::before {
  content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: rgba(74, 144, 226, 0.1);
   transition: left 0.5s ease;
  }

 .footer-button:hover {
  transform: translateY(-2px);
   color: white;
   border-color: #5ba0f2;
   text-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
  }

 .footer-button:hover::before {
  left: 100%;
  }

 .footer-button:active {
  transform: translateY(0);
   color: #357abd;
   border-color: #357abd;
  }

 .footer.is-visible {
  animation: slideUp 0.6s ease-out;
  }

 @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

 @media (max-width: 768px) {
  .footer {
  padding: 1.5rem 0.75rem;
  }

 .footer-text {
  font-size: 0.8rem;
  }

 .footer-buttons {
  gap: 0.75rem;
  }

 .footer-button {
  padding: 0.6rem 1.2rem;
   font-size: 0.8rem;
   min-width: 140px;
  }

}

 @media (max-width: 480px) {
  .footer {
  padding: 1.25rem 0.5rem;
  }

 .footer-container {
  gap: 1.25rem;
  }

 .footer-text {
  font-size: 0.75rem;
   padding: 0 0.5rem;
  }

 .footer-buttons {
  flex-direction: column;
   width: 100%;
   align-items: center;
   gap: 0.5rem;
  }

 .footer-button {
  width: 100%;
   max-width: 280px;
   padding: 0.75rem 1rem;
   font-size: 0.75rem;
  }

}

 @media (max-width: 320px) {
  .footer-text {
  font-size: 0.7rem;
  }

 .footer-button {
  font-size: 0.7rem;
   padding: 0.65rem 0.8rem;
  }

}

 .login-page {
  max-width: 420px;
   margin: 50px auto;
   padding: 30px;
   border-radius: 20px;
   background: rgba(20, 20, 20, 0.6);
   box-shadow: 0 8px 32px rgba(0,0,0,0.5);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   color: #eee;
   font-family: Arial, sans-serif;
   animation: fadeIn 1s ease-in-out;
  }

 .login-page h2 {
  text-align: center;
   margin-bottom: 20px;
   color: #ffd369;
  }

 .login-page .tabs {
  display: flex;
   position: relative;
   margin-bottom: 5px;
  }

 .login-page .tab {
  flex: 1;
   text-align: center;
   padding: 10px;
   cursor: pointer;
   color: #aaa;
   transition: 0.3s;
  }

 .login-page .active-tab {
  color: #fff;
   font-weight: bold;
  }

 .login-page .tab-highlight {
  position: absolute;
   bottom: 0;
   height: 3px;
   background: #ffd369;
   transition: 0.3s;
  }

 .login-page .form-group {
  position: relative;
   margin-bottom: 4px;
  }

 .login-page .form-group input {
  width: 100%;
   padding: 12px;
   border: 1px solid rgba(255,255,255,0.2);
   border-radius: 10px;
   background: rgba(0,0,0,0.4);
   color: #fff;
   font-size: 14px;
   box-sizing: border-box;
  }

 .login-page .form-group label {
  position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 14px;
   color: #aaa;
   pointer-events: none;
   transition: 0.3s;
  }

 .login-page .form-group input:focus + label, .login-page .form-group input:not(:placeholder-shown) + label {
  top: -8px;
   left: 8px;
   font-size: 12px;
   color: #ffd369;
   background: rgba(20,20,20,0.8);
   padding: 0 4px;
   border-radius: 5px;
  }

 .login-page .btn {
  width: 100%;
   padding: 12px;
   border: none;
   border-radius: 10px;
   background: rgba(255,211,105,0.1);
   color: #ffd369;
   font-weight: bold;
   cursor: pointer;
   transition: 0.3s;
  }

 .login-page .btn:hover {
  background: rgba(255,211,105,0.25);
  }

 .login-page .policy {
  margin-top: 20px;
   font-size: 12px;
   color: #aaa;
   text-align: center;
  }

 .login-page .policy a {
  color: #ffd369;
   margin: 0 5px;
  }

 .toast-container {
  position: fixed;
   top: 20px;
   right: 20px;
   z-index: 9999;
  }

 .toast {
  padding: 12px 20px;
   margin-bottom: 10px;
   border-radius: 8px;
   background: rgba(40,40,40,0.9);
   color: #fff;
   opacity: 0;
   transform: translateX(100%);
   transition: all 0.5s;
  }

 .toast.show {
  opacity: 1;
   transform: translateX(0);
  }

 .toast.success {
  border-left: 4px solid #4caf50;
  }

 .toast.error {
  border-left: 4px solid #f44336;
  }

 .password-error {
  border-color: #f44336 !important;
  }

 .login-page .form-options {
  display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
   font-size: 14px;
  }

 .login-page .remember-me {
  display: flex;
   align-items: center;
   cursor: pointer;
   color: #aaa;
  }

 .login-page .remember-me input {
  width: auto;
   margin-right: 8px;
  }

 .btn-google {
  background-color: #4285F4;
   color: white;
   display: inline-block;
   width: calc(100% - 30px);
   padding: 10px 15px;
   border-radius: 5px;
   text-decoration: none;
   font-weight: bold;
   border: 1px solid #4285F4;
   transition: background-color 0.3s;
  }

 .btn-google:hover {
  background-color: #357ae8;
  }

 .shop-container, .inventory-container {
  max-width: 1200px;
   min-height:80vh;
   margin: 2px auto;
   padding: 20px;
   background: var(--glass-bg);
   backdrop-filter: blur(12px);
   border: 1px solid var(--glass-border);
   border-radius: var(--border-radius);
  }

 .inventory-title {
  font-size: 1.8em;
   text-align: center;
   color: var(--primary-orange);
   margin-bottom: 5px;
  }

 .tabs-nav {
  display: flex;
   justify-content: flex-start;
   margin-bottom: 20px;
   border-bottom: 1px solid var(--glass-border);
   overflow-x: auto;
   white-space: nowrap;
   scrollbar-color: transparent transparent;
  }

 .tabs-nav:hover {
  scrollbar-color: #555 #2c2c2c;
  }

 .tab-link {
  padding: 10px 20px;
   cursor: pointer;
   color: var(--text-secondary);
   font-weight: 500;
   transition: var(--transition);
   border-bottom: 3px solid transparent;
   text-decoration: none;
  }

 .tab-link.active {
  color: var(--primary-orange);
   border-bottom-color: var(--primary-orange);
  }

 .tab-content {
  display: none;
  }

 .tab-content.active {
  display: block;
  }

 .tabs-nav::-webkit-scrollbar {
  height: 6px;
  }

 .tabs-nav::-webkit-scrollbar-track {
  background: transparent;
  }

 .tabs-nav::-webkit-scrollbar-thumb {
  background-color: transparent;
   border-radius: 10px;
   transition: background-color 0.2s ease-out;
  }

 .tabs-nav:hover::-webkit-scrollbar-thumb {
  background-color: #555;
  }

 .tabs-nav::-webkit-scrollbar-thumb:hover {
  background-color: #777;
  }

 .tab-link {
  padding: 10px 20px;
   cursor: pointer;
   color: var(--text-secondary);
   font-weight: 500;
   transition: var(--transition);
   border-bottom: 3px solid transparent;
   text-decoration: none;
  }

 .tab-link.active {
  color: var(--primary-orange);
   border-bottom-color: var(--primary-orange);
  }

 .tab-content {
  display: none;
  }

 .tab-content.active {
  display: block;
  }

 .items-grid, .inventory-grid {
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
   gap: 20px;
   animation: fadeIn 1s ease-in-out;
  }

 .item-card, .inventory-slot {
  position: relative;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   border-radius: 10px;
   padding: 8px;
   aspect-ratio: 1 / 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
   text-align: center;
   cursor: pointer;
   overflow: hidden;
   transition: var(--transition);
  }

 .item-card:hover, .inventory-slot:hover {
  transform: scale(1.05);
   z-index: 2;
  }

 .item-card .item-icon, .inventory-slot .inventory-icon {
  width: 50%;
   height: 50%;
   margin-bottom: 1px;
   object-fit: contain;
  }

 .item-card .item-price {
  font-size: 11px;
   font-weight: bold;
   color: #ffc107;
  }

 .inventory-slot .item-quantity {
  position: absolute;
   top: 5px;
   right: 5px;
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 1px 5px;
   border-radius: 5px;
   font-size: 0.8em;
   font-weight: bold;
   z-index: 3;
  }

 .item-name, .inventory-item-name {
  position: relative;
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   color: var(--text-primary);
   height: 1.2em;
   line-height: 1.2em;
   flex-shrink: 0;
   margin-top: 5px;
   margin-bottom: 5px;
   font-size: 11px;
   font-weight: 500;
   margin: 0px 0;
   text-align: center;
  }

 .is-scrolling-text {
  display: inline-block;
   animation: marquee-final 8s linear infinite;
   animation-delay: 1.5s;
  }

 @keyframes marquee-dynamic {
  0% {
  transform: translateX(0);
  }

 100% {
  transform: translateX(var(--moveX));
  }

}

 @keyframes pulse-gold {
  0%, 100% {
  box-shadow: 0 0 5px 1px rgba(255, 193, 7, 0.4);
  }

 50% {
  box-shadow: 0 0 6px 3px rgba(255, 193, 7, 0.7);
  }

}

 @keyframes pulse-green {
  0%, 100% {
  box-shadow: 0 0 3px 1px rgb(68 255 5 / 55%);
  }

 50% {
  box-shadow: 0 0 4px 2px rgb(5 255 130 / 95%);
  }

}

 @keyframes pulse-glow {
  0%, 100% {
  box-shadow: 0 0 5px 0px #0ff, inset 0 0 5px 0px #0ff;
  }

 50% {
  box-shadow: 0 0 10px 2px #0ff, inset 0 0 10px 2px #0ff;
  }

}

 @keyframes pulse-glow2 {
  0%, 100% {
  box-shadow: 0 0 5px 0px #a200ff, inset 0 0 5px 0px #a200ff;
  }

 50% {
  box-shadow: 0 0 10px 2px #a200ff, inset 0 0 10px 2px #a200ff;
  }

}

 @keyframes pulse-glow3 {
  0%, 100% {
  box-shadow: 0 0 5px 0px #ff0059, inset 0 0 5px 0px #ff0059;
  }

 50% {
  box-shadow: 0 0 10px 2px #ff0059, inset 0 0 10px 2px #ff0059;
  }

}

 @keyframes pulse-glow4 {
  0%, 100% {
  box-shadow: 0 0 5px 0px rgb(255 0 0 / 55%), inset 0 0 5px 0px rgb(255 0 0 / 55%);
  }

 50% {
  box-shadow: 0 0 10px 2px rgb(255 0 59 / 55%), inset 0 0 10px 2px rgb(255 0 59 / 55%);
  }

}

 @keyframes estates-glow {
  0%, 100% {
  border-color: rgb(240, 255, 255);
  }

 50% {
  border-color: rgb(255, 240, 240);
  }

}

 @keyframes runes-glow {
  0%, 100% {
  border-color: rgb(5, 255, 193);
  }

 50% {
  border-color: rgb(5, 193, 255);
  }

}

 @keyframes simple-glow {
  0%, 100% {
  border-color: rgba(255, 193, 7, 0.5);
  }

 50% {
  border-color: rgba(255, 193, 7, 1);
  }

}

 .category-equipment {
  border: 2px solid rgba(255, 193, 7, 0.8);
   animation: pulse-gold 2.5s infinite ease-in-out;
  }

 .category-gems {
  border: 2px solid rgb(68 255 5 / 35%);
   animation: pulse-green 4.5s infinite ease-in-out;
  }

 .category-blessings {
  border: 2px solid rgba(255, 193, 7, 0.8);
   animation: pulse-gold 4.5s infinite ease-in-out;
  }

 .category-runes {
  border: 2px solid rgb(5, 193, 255);
   animation: runes-glow 3s infinite ease-in-out;
  }

 .category-spirits {
  border-color: transparent;
   box-shadow: 0 0 5px 0px #0ff, inset 0 0 5px 0px #0ff;
   animation: pulse-glow 4.5s infinite ease-in-out;
  }

 .category-skins {
  border-color: transparent;
   box-shadow: 0 0 5px 0px #a200ff, inset 0 0 5px 0px #a200ff;
   animation: pulse-glow2 4.5s infinite ease-in-out;
  }

 .category-souvenirs {
  border-color: transparent;
   box-shadow: 0 0 5px 0px #ff0059, inset 0 0 5px 0px #ff0059;
   animation: pulse-glow3 4.5s infinite ease-in-out;
  }

 .category-estates {
  border-color: transparent;
   box-shadow: 0 0 5px 0px #ff0059, inset 0 0 5px 0px #ff0059;
   animation: estates-glow 4.5s infinite ease-in-out;
  }

 .category-vipshop {
  border-color: transparent;
   box-shadow: 0 0 5px 0px #ff0000, inset 0 0 5px 0px #ff0000;
   animation: pulse-glow4 4.5s infinite ease-in-out;
  }

 .category-other {
  border: 2px solid rgba(255, 193, 7, 0.5);
   animation: simple-glow 3s infinite ease-in-out;
  }

 @keyframes fadeInModal {
  from {
  opacity: 0;
   transform: translate(-50%, -50%) scale(0.9);
  }

 to {
  opacity: 1;
   transform: translate(-50%, -50%) scale(1);
  }

}

 .modal-overlay {
  display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgb(0 0 0 / 95%);
   z-index: 1099;
  }

 .modal-content_shop_inv {
  display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: var(--glass-bg);
   backdrop-filter: blur(12px);
   border: 1px solid var(--glass-border);
   border-radius: var(--border-radius);
   z-index: 1100;
   width: 90%;
   max-width: 400px;
   padding: 25px;
   animation: fadeInModal 0.3s ease-in-out;
  }

 .close-btn {
  position: absolute;
   top: 10px;
   right: 15px;
   font-size: 1.5em;
   cursor: pointer;
   color: white;
   background: none;
   border: none;
   line-height: 1;
  }

 .modal-header {
  text-align: center;
   margin-bottom: 20px;
  }

 .modal-icon {
  width: 80px;
   height: 80px;
   object-fit: contain;
  }

 .modal-item-name {
  font-size: 1.5em;
   color: var(--primary-orange);
   margin-top: 10px;
  }

 .modal-item-desc {
  color: var(--text-secondary);
   margin: 15px 0;
   font-size: 0.9em;
   text-align: center;
  }

 .modal-item-price {
  font-size: 1.4em;
   font-weight: bold;
   color: #ffc107;
   margin-bottom: 20px;
   text-align: center;
  }

 .buy-form select, .buy-form input[type="number"], .send-form select, .send-form input {
  width: 100%;
   box-sizing: border-box;
   padding: 10px;
   margin-bottom: 10px;
   border-radius: 8px;
   border: 1px solid var(--glass-border);
   background: rgba(0, 0, 0, 0.3);
   color: white;
   font-size: 1em;
  }

 .buy-button, .send-button {
  width: 100%;
   padding: 12px;
   border: none;
   border-radius: 8px;
   background: var(--primary-orange);
   color: white;
   font-weight: bold;
   cursor: pointer;
   transition: var(--transition);
   font-size: 1.1em;
  }

 .buy-button:hover, .send-button:hover {
  background: var(--hover-orange);
  }

 .empty-tab-message {
  text-align: center;
   color: var(--text-secondary);
   padding: 40px 0;
  }

 .send-form {
  margin-top: 20px;
   text-align: left;
  }

 .send-form label {
  display: block;
   margin-bottom: 5px;
   color: var(--text-secondary);
   font-size: 0.9em;
  }

 .pagination {
  display: flex;
   justify-content: flex-end;
   align-items: center;
   padding: 5px 0 5px 0;
   gap: 2px;
  }

 .pagination a {
  text-decoration: none;
   color: var(--text-secondary);
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid var(--glass-border);
   padding: 8px 14px;
   border-radius: 8px;
   transition: var(--transition);
   font-weight: 500;
  }

 .pagination a:hover {
  background: var(--primary-orange);
   color: var(--text-primary);
   border-color: var(--primary-orange);
  }

 .pagination a.active {
  background: var(--primary-orange);
   color: var(--text-primary);
   border-color: var(--hover-orange);
   cursor: default;
  }

 .vip-status-box {
  text-align: center;
   padding: 5px;
   margin-bottom: 2px;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid var(--primary-orange);
   border-radius: 8px;
   color: var(--text-primary);
   font-size: 12px;
  }

 .original-price {
  text-decoration: line-through;
   color: var(--text-secondary);
   font-size: 0.9em;
   margin-right: 8px;
  }

 .shop-controls {
  display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   padding: 10px;
   margin-bottom: 5px;
   background: rgba(0,0,0,0.2);
   border-radius: 8px;
  }

 .search-form {
   display: flex;
   flex-direction: row;
   gap: 10px;
  }

 .search-form input[type="text"] {
  padding: 8px 12px;
   border: 1px solid var(--glass-border);
   background: rgba(0,0,0,0.3);
   color: var(--text-primary);
   border-radius: 6px;
  }

 .search-form button {
  padding: 8px 15px;
   border: none;
   background: var(--accent-color);
   color: white;
   font-weight: bold;
   border-radius: 6px;
   cursor: pointer;
   transition: var(--transition);
  }

 .search-form button:hover {
  background: var(--accent-hover);
  }

 .sort-options {
  display: flex;
   align-items: center;
   gap: 10px;
   color: var(--text-secondary);
  }

 .sort-options a {
  text-decoration: none;
   color: var(--text-secondary);
   padding: 5px 10px;
   border: 1px solid transparent;
   border-radius: 6px;
   transition: var(--transition);
  }

 .sort-options a:hover {
  color: var(--text-primary);
   background: rgba(255,255,255,0.1);
  }

 .sort-options a.active {
  color: var(--primary-orange);
   border-color: var(--primary-orange);
   font-weight: bold;
  }

 .limit-info {
  margin-top: 3px;
   font-size: 9px;
  }

 @media (max-width: 768px) {
  .shop-container, .inventory-container {
  height: 90vh;
   margin: 0 auto;
   padding: 4px;
   border-radius: 0;
  }

 .items-grid, .inventory-grid {
  display: grid;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
   gap: 5px;
  }

 .item-name, .inventory-item-name {
  font-size: 9px;
  }

 .limit-info {
  margin-top: 1px;
   font-size: 8px;
  }

 .sort-options {
  gap: 8px;
  }

 .sort-options a {
  font-size: 12px;
  }

 .tabs-nav-wrapper {
  position: relative;
   margin-bottom: 15px;
  }

 .tabs-nav-wrapper::after {
  content: '»';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 25px;
   background: linear-gradient(to left, var(--glass-bg) 30%, transparent);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary-orange);
   font-size: 28px;
   font-weight: bold;
   pointer-events: none;
   padding-bottom: 13px;
   opacity: 1;
   visibility: visible;
   transition: opacity 0.2s ease, visibility 0.2s ease;
   z-index: 2;
  }

 .tabs-nav-wrapper.hide-indicator::after {
  opacity: 0;
   visibility: hidden;
  }

 .tabs-nav {
  -webkit-overflow-scrolling: touch;
   padding-bottom: 5px;
   margin-bottom: -5px;
  }

}

 .top_up_container {
  display: flex;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   animation: fadeIn 1s ease-in-out;
  }

 .payments_info {
  background: var(--glass-bg);
   backdrop-filter: var(--blur);
   border-radius: 12px;
   padding: 15px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.1);
   margin: 2px auto;
   width: 60%;
  }

.payment-methods {
    display: flex;
    flex-direction: row;
    
    gap: 5px;
}

/* Стиль самої картки */
.payment-card {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.payment-card h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
    color: #fff;
    text-align: center;
    border-left: dotted;
}

.payment-card p {
    font-size: 0.7em;
    color: #ccc;
    margin-bottom: 5px;
    text-align: center;
}

.payment-card input {
      width: 100%;
   background: var(--bg-tertiary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: 12px;
   color: var(--text-primary);
   font-size: 0.95rem;
   outline: none;
   transition: var(--transition);
}

/* Стилі для кроків у блоці FunPay */
.step {
    margin-bottom: 4px;
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: #8a2be2;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    margin-right: 10px;
}

/* Стилі для кнопки FunPay */
.btn-claim {
  width: 100%;
   padding: 15px;
   background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
   color: white;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   font-weight: 600;
   font-size: 16px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-claim:hover {
      transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}


 h3 {
  font-size: 22px;
   margin-bottom: 20px;
   color: #e6e6e6;
   text-align: center;
  }

 .payment-system {
  display: flex;
   flex-wrap: wrap;
   margin-bottom: 5px;
  }

 .payment-system span {
  font-size: 14px;
  }

 .payments_button {
  display: flex;
   align-items: center;
   margin: 5px;
   padding: 15px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   transition: all 0.3s ease;
   flex-direction: column;
  }

 .payments_button:hover {
  background: rgba(255, 255, 255, 0.12);
   transform: translateY(-2px);
  }

 .payments_button button {
  width: 150px;
   height: 75px;
   border: none;
   border-radius: 10px;
   cursor: pointer;
   background: rgba(255, 255, 255, 0.1);
   color: white;
   font-weight: 600;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   padding: 4px;
  }

 .payments_button button:hover {
  background: rgba(255, 255, 255, 0.15);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }

 #funpay {
  background: url('/css/v2/funpay.svg') no-repeat center, linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
   background-size: contain, cover;
  }

 h5 {
  color: #ffeb3b !important;
   margin: 3px 0;
   text-align: center;
   font-size: 14px;
   background: rgba(255, 235, 59, 0.1);
   padding: 10px;
   border-radius: 8px;
  }

 #showHistoryBtn {
  width: 100%;
   padding: 15px;
   background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
   color: white;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   font-weight: 600;
   font-size: 16px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

 #showHistoryBtn:hover {
  transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }

 .recent-payments {
  background: var(--glass-bg);
   backdrop-filter: var(--blur);
   border-radius: 12px;
   padding: 25px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.1);
   margin: 2px auto;
   width: 39.5%;
  }

 .recent-payments h3 {
  margin-bottom: 5px;
   align-items: center;
  }

 .payment-item {
  display: flex;
   justify-content: space-between;
   padding: 12px 15px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 10px;
   margin-bottom: 10px;
   transition: all 0.3s ease;
  }

 .payment-item:hover {
  background: rgba(255, 255, 255, 0.12);
  }

 .payment-date {
  color: #a0a0a0;
   font-size: 14px;
  }

 .payment-amount {
  font-weight: 600;
   color: #4CAF50;
  }

 .payment-status {
  padding: 4px 10px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 500;
  }

 .status-completed {
  background: rgba(76, 175, 80, 0.2);
   color: #4CAF50;
  }

 .status-pending {
  background: rgba(255, 193, 7, 0.2);
   color: #FFC107;
  }

 .status-failed {
  background: rgba(244, 67, 54, 0.2);
   color: #F44336;
  }

 .modal {
  display: none;
   position: fixed;
   z-index: 1100;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   animation: fadeIn 0.3s ease;
  }

 .modal-content_top_up {
  background: rgba(30, 30, 46, 0.8);
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   margin: 5% auto;
   padding: 25px;
   border-radius: 20px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
   border: 1px solid rgba(255, 255, 255, 0.1);
   width: 90%;
   max-width: 700px;
   max-height: 80vh;
   overflow-y: auto;
   animation: slideIn 0.3s ease;
  }

 .close {
  color: #aaa;
   float: right;
   font-size: 28px;
   font-weight: bold;
   cursor: pointer;
   transition: color 0.3s ease;
  }

 .close:hover {
  color: #fff;
  }

 #historyContainer {
  margin-top: 20px;
  }

 .history-table {
  width: 100%;
   border-collapse: collapse;
  }

 .history-table th, .history-table td {
  padding: 12px 15px;
   text-align: left;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

 .history-table th {
  background: rgba(255, 255, 255, 0.1);
   font-weight: 600;
  }

 .history-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
  }

 .no-payments {
  text-align: center;
   padding: 20px;
   color: #a0a0a0;
   font-style: italic;
  }

 .loading {
  text-align: center;
   padding: 20px;
   color: #a0a0a0;
  }

 @keyframes slideIn {
  from { transform: translateY(50px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
   }

 @media (max-width: 600px) {
  .payments_info {
  border-radius: 0px;
   padding: 4px;
   margin: 0px auto;
   width: 100%;
  }
  .payment-methods {
  flex-direction: column; /* За замовчуванням картки йдуть одна під одною (для мобільних) */
   }
   
 .recent-payments {
  border-radius: 0px;
   padding: 10px;
   width: 100%;
  }

 .top_up_container {
  display: flex;
   flex-direction: column;
  }

 .payments_button {
  margin: 2px;
   flex-direction: column;
  }

 .payments_button button {
  margin-bottom: 10px;
  }

 .payment-item {
  flex-direction: column;
  }

 .payment-item > div {
  margin-bottom: 5px;
  }

 .history-table {
  font-size: 14px;
  }

 .history-table th, .history-table td {
  padding: 8px 10px;
  }

}

 .container_top_up_info {
  background: #01ff673b;
   padding: 30px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   width: 100%;
   max-width: 100%;
   text-align: center;
  }

 h1 {
  color: #5a5a5a;
  }

 .form-group {
  margin-bottom: 20px;
  }

 .container_top_up_info label {
  display: block;
   margin-bottom: 8px;
   font-weight: bold;
   text-align: left;
  }

 .container_top_up_info input[type="text"] {
  width: calc(100% - 20px);
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 4px;
  }

 .container_top_up_info button {
  width: 100%;
   padding: 15px;
   background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
   color: white;
   border: none;
   border-radius: 12px;
   cursor: pointer;
   font-weight: 600;
   font-size: 16px;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

 .container_top_up_info button:hover {
  transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }

 .container_top_up_info button:hover {
  background-color: #0056b3;
  }

 .message {
  padding: 15px;
   margin-top: 20px;
   border-radius: 4px;
  }

 .message.success {
  background-color: #d4edda;
   color: #155724;
   border: 1px solid #c3e6cb;
  }

 .message.error {
  background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
  }

 .coin-icon {
  height: 16px;
   width: 16px;
   vertical-align: middle;
   margin-left: 5px;
  }

 * {
  box-sizing: border-box;
  }

 .text-container {
  max-width: 1200px;
   margin: 2px auto;
  }

 #support {
  background: rgba(31, 41, 55, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   padding: 2.5rem;
   animation: fadeIn 0.6s ease-out;
  }

 #support h3 {
  color: var(--text-primary);
   margin-bottom: 1rem;
   font-weight: 600;
   font-size: 1.2rem;
  }

 #support a {
  color: var(--accent-color);
   text-decoration: none;
   transition: var(--transition);
   font-weight: 500;
  }

 #support a:hover {
  color: var(--accent-hover);
  }

 #support-form {
  margin-top: 1.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

 #support-form label {
  display: block;
   margin-bottom: 1rem;
   color: var(--text-primary);
   font-weight: 500;
   font-size: 1.1rem;
  }

 #message {
  width: 100%;
   background: var(--bg-tertiary);
   border: 1px solid var(--border-color-form);
   border-radius: var(--border-radius-form);
   padding: 1.2rem;
   color: var(--text-primary);
   font-size: 1rem;
   resize: vertical;
   min-height: 150px;
   transition: var(--transition);
   font-family: inherit;
  }

 #message:focus {
  outline: none;
   border-color: var(--accent-color);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  }

 .notice-text {
  color: var(--warning-color);
   margin: 1.5rem 0;
   font-size: 0.9rem;
   line-height: 1.5;
   padding: 1rem;
   background: rgba(249, 115, 22, 0.1);
   border-radius: 8px;
   border-left: 4px solid var(--warning-color);
  }

 #submit {
  background: var(--accent-color);
   color: white;
   border: none;
   padding: 1rem 2.5rem;
   border-radius: var(--border-radius-form);
   font-size: 1.1rem;
   font-weight: 600;
   cursor: pointer;
   transition: var(--transition);
   width: 100%;
   text-transform: uppercase;
   letter-spacing: 0.5px;
  }

 #submit:hover {
  background: var(--accent-hover);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
  }

 @media (max-width: 768px) {
  .text-container {
  padding: 0;
   margin: 0;
  }

 #support {
  padding: 1.5rem;
   border-radius: 0;
   border: none;
  }

 #support h3 {
  font-size: 1.1rem;
  }

 #message {
  min-height: 120px;
   padding: 1rem;
  }

}


 textarea::-webkit-scrollbar {
  width: 8px;
  }

 textarea::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
   border-radius: 4px;
  }

 textarea::-webkit-scrollbar-thumb {
  background: var(--accent-color);
   border-radius: 4px;
  }

 textarea::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
  }

 .player_settings {
  width: 100%;
   max-width: 1200px;
   margin: 2px auto;
   box-sizing: border-box;
   animation: fadeIn 1s ease-in-out;
  }

 .settings-tabcontent {
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 5px;
  }

 .settings-tabcontent > div {
  background: var(--bg-secondary);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: 25px;
   box-shadow: 0 8px 25px rgba(0,0,0,0.5);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

 .settings-tabcontent > div:hover {
  transform: translateY(-4px);
   box-shadow: 0 12px 35px rgba(0,0,0,0.7);
  }

 form {
  display: flex;
   flex-direction: column;
   gap: 15px;
  }
  
   .login-page form {
  display: flex;
   flex-direction: column;
   gap: 3px;
  }

 label {
  font-weight: 600;
   font-size: 0.95rem;
   color: var(--text-secondary);
  }

 input[type="text"], input[type="password"], input[type="file"], select {
  width: 100%;
   background: var(--bg-tertiary);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: 12px;
   color: var(--text-primary);
   font-size: 0.95rem;
   outline: none;
   transition: var(--transition);
  }

 input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, select:focus {
  border-color: var(--accent-color);
   box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
  }

 .settings_button, input[type="submit"] {
  background: var(--accent-color);
   border: none;
   border-radius: var(--border-radius);
   padding: 8px 15px;
   color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: var(--transition);
   text-align: center;
   text-decoration: none;
   margin: 3px auto;
  }

 .settings_button:hover, input[type="submit"]:hover {
  background: var(--accent-hover);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
  }

 .modal {
  display: none;
   position: fixed;
   z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.9);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   animation: fadeIn 0.3s ease;
  }

 .modal-content_settings {
  position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: var(--bg-secondary);
   backdrop-filter: blur(25px);
   -webkit-backdrop-filter: blur(25px);
   padding: 40px;
   border: 1px solid var(--border-color);
   border-radius: 20px;
   width: 95%;
   height: 90vh;
   max-width: 1200px;
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
   animation: modalAppear 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   display: flex;
   flex-direction: column;
  }

 .close {
  position: absolute;
   top: 20px;
   right: 25px;
   font-size: 32px;
   font-weight: bold;
   color: var(--text-primary);
   cursor: pointer;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--bg-tertiary);
   transition: all 0.3s ease;
   z-index: 10;
  }

 .close:hover {
  background: var(--accent-color);
   transform: rotate(90deg) scale(1.1);
  }

 .modal-content_settings h2 {
  font-size: 2.2rem;
   font-weight: 700;
   color: var(--text-primary);
   margin: 0 0 30px 0;
   text-align: center;
  }

 .setavatar {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2px;
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
  }

 .avatar-item {
  text-align: center;
   transition: var(--transition);
   padding: 15px;
   border-radius: var(--border-radius);
   background: var(--bg-tertiary);
  }

 .avatar-item:hover {
  transform: translateY(-8px);
   background: rgba(45, 45, 45, 1);
  }

 .avatar-item img {
  width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: 50%;
   border: 3px solid var(--border-color);
   transition: all 0.3s ease;
   margin-bottom: 15px;
  }

 .avatar-item:hover img {
  border-color: var(--accent-color);
   box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
  }


 @keyframes modalAppear {
  from {
  opacity: 0;
   transform: translate(-50%, -50%) scale(0.8);
  }

 to {
  opacity: 1;
   transform: translate(-50%, -50%) scale(1);
  }

}

 .avatar-controls {
  display: flex;
   gap: 10px;
   margin-top: 15px;
   align-items: stretch;
  }

 .custom-file-upload {
  background: var(--accent-color);
   border: none;
   border-radius: var(--border-radius);
   padding: 8px 15px;
   color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: var(--transition);
   text-align: center;
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-grow: 1;
  }

 .custom-file-upload:hover {
  background: var(--accent-hover);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
  }

 input[type="file"]#photo {
  display: none;
  }

 .google-account-info {
  display: flex;
   align-items: center;
   gap: 15px;
   background: var(--bg-tertiary);
   padding: 12px;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
  }

 .google-logo {
  width: 25px;
   height: 25px;
  }

 .email-text {
  display: flex;
   flex-direction: column;
  }

 .email-text span {
  font-weight: 600;
   color: var(--text-primary);
  }

 .email-text small {
  font-size: 0.8em;
   color: #4CAF50;
  }

 .email_new_google .notice {
  font-size: 0.85rem;
   color: var(--text-secondary);
   margin-top: 10px;
   text-align: center;
  }

 @media (max-width: 768px) {
  .player_settings {
  margin-top: 0px;
  }

 .settings-tabcontent {
  gap: 4px;
  }

 .settings-tabcontent > div {
  border-radius: 0;
   border-left: none;
   border-right: none;
  }

 .modal-content_settings {
  width: 100%;
   height: 100vh;
   border-radius: 0;
  }

}

 .modal-content_settings::-webkit-scrollbar {
  width: 8px;
  }

 .modal-content_settings::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
   border-radius: 4px;
  }

 .modal-content_settings::-webkit-scrollbar-thumb {
  background: var(--accent-color);
   border-radius: 4px;
  }

 .modal-content_settings::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover);
  }

 .rating-page-content {
  width: 100%;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   position: relative;
   animation: fadeIn 1s ease-in-out;
   z-index: 1;
  }

 .rating-page-content .ratings-container {
  width: 100%;
   max-width: 1200px;
   margin: 2px auto;
  }

 .rating-page-content .server-rating {
  background-color: rgba(31, 41, 55, 0.8);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   margin-bottom: 5px;
   padding: 25px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }

 .rating-page-content .server-title {
  color: #bb86fc;
   font-size: 2.5em;
   text-align: center;
   margin-bottom: 25px;
   text-shadow: 0 0 10px rgba(187, 134, 252, 0.4);
  }

 .rating-page-content .rating-table {
  width: 100%;
   border-collapse: separate;
   border-spacing: 0 8px;
  }

 .rating-page-content .rating-table thead {
  display: none;
  }

 .rating-page-content .rating-table td {
  padding: 0;
   text-align: left;
   vertical-align: middle;
   background-color: rgba(43, 55, 72, 0.8);
   border-radius: 8px;
  }

 .rating-page-content .rating-table tr:not([class*="rank-"]):hover td {
  background-color: rgba(55, 71, 90, 0.8);
  }

 .rating-page-content .rank-cell {
  font-weight: bold;
   font-size: 1.2em;
   color: #60A5FA;
   text-align: center;
  }

 .rating-page-content .name-cell {
  font-weight: bold;
   color: #F9FAFB;
  }

 .rating-page-content .bp-cell {
  font-weight: bold;
   color: #A78BFA;
  }

 .rating-page-content .camp-badge {
  padding: 4px 10px;
   border-radius: 20px;
   font-size: 0.8em;
   font-weight: bold;
   color: #fff;
  }

 .rating-page-content .camp-bloodoath {
  background-color: #991B1B;
  }

 .rating-page-content .camp-holyguard {
  background-color: #1E40AF;
  }

 .rating-page-content .camp-none {
  background-color: #4B5563;
  }

 .rating-page-content .gender-icon {
  font-size: 1.2em;
  }

 .rating-page-content .no-data-message {
  text-align: center;
   padding: 40px;
   color: #6B7280;
   font-size: 1.2em;
  }

 .rating-page-content .spoiler-container {
  text-align: center;
   margin-top: 20px;
  }

 .rating-page-content .spoiler-toggle {
  display: none;
  }

 .rating-page-content .spoiler-label {
  background-color: #374151;
   color: #D1D5DB;
   padding: 10px 25px;
   border-radius: 8px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   display: inline-block;
  }

 .rating-page-content .spoiler-label:hover {
  background-color: #4B5563;
  }

 .rating-page-content tr.hidden-row {
  display: none;
  }

 .rating-page-content .spoiler-toggle:checked ~ .rating-table tr.hidden-row {
  display: table-row;
  }

 .mobile-only {
  display: none !important;
  }

 .rating-page-content .player-wrapper {
  padding: 0 !important;
  }

 .rating-page-content .player-wrapper .main-info-bar {
  display: flex;
   align-items: center;
   padding: 15px;
  }

 .rating-page-content .player-wrapper .info-block {
  padding: 0 15px;
  }

 .rating-page-content .player-wrapper .info-block:first-child {
  padding-left: 0;
  }

 .rating-page-content .player-wrapper .info-block:last-child {
  padding-right: 0;
  }

 .rating-page-content .info-block.rank-cell {
  flex: 0 0 8%;
  }

 .rating-page-content .info-block.name-cell {
  flex: 1 1 35%;
  }

 .rating-page-content .info-block.gender-cell {
  flex: 0 0 10%;
   text-align: center;
  }

 .rating-page-content .info-block.level-cell {
  flex: 0 0 12%;
  }

 .rating-page-content .info-block.bp-cell {
  flex: 0 0 20%;
  }

 .rating-page-content .info-block.camp-cell {
  flex: 0 0 15%;
  }

 .rating-page-content .extra-info {
  display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   background-color: rgba(30, 41, 59, 0.7);
   padding: 10px;
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
  }

 .rating-page-content .extra-info .stat {
  display: flex;
   align-items: center;
   gap: 8px;
   color: #CBD5E1;
   font-size: 0.9em;
  }

 .rating-page-content .extra-info .stat-value {
  font-weight: bold;
   color: #F1F5F9;
  }

 .rating-page-content .extra-info .stat-icon {
  font-size: 1.2em;
  }

 @keyframes gold-glow {
  0% {
  box-shadow: 0 0 6px 2px #ffb822;
  }

 100% {
  box-shadow: 0 0 12px 4px #fadf8b;
  }

}

 @keyframes silver-glow {
  0% {
  box-shadow: 0 0 6px 2px #c0c0c0;
  }

 100% {
  box-shadow: 0 0 12px 4px #f0f0f0;
  }

}

 @keyframes bronze-glow {
  0% {
  box-shadow: 0 0 6px 2px #cd7f32;
  }

 100% {
  box-shadow: 0 0 12px 4px #e8a76a;
  }

}

 .rating-page-content td.rank-1 {
  animation: gold-glow 1.5s infinite alternate ease-in-out;
   border: 1px solid #ffb822;
  }

 .rating-page-content td.rank-2 {
  animation: silver-glow 1.5s infinite alternate ease-in-out;
   border: 1px solid #c0c0c0;
  }

 .rating-page-content td.rank-3 {
  animation: bronze-glow 1.5s infinite alternate ease-in-out;
   border: 1px solid #cd7f32;
  }

 .rating-page-content td[class*="rank-"] {
  background-color: rgba(26, 34, 47, 0.9);
  }

 .rating-page-content td[class*="rank-"] .extra-info {
  border-radius: 0;
  }

 @media screen and (max-width: 768px) {
  body {
  padding-bottom: 20px;
  }

 .rating-page-content .ratings-container {
  width: 100%;
   padding: 0;
   margin: 0px auto;
  }

 .rating-page-content .server-rating {
  border-radius: 0;
   padding: 15px 10px;
   margin-bottom: 15px;
  }

 .rating-page-content .server-title {
  font-size: 1.8em;
  }

 .rating-page-content .rating-table {
  border-spacing: 0;
  }

 .rating-page-content .desktop-only {
  display: none !important;
  }

 .rating-page-content .mobile-only {
  display: block !important;
   width: 100%;
  }

 .rating-page-content .rating-table tr, .rating-page-content .spoiler-toggle:checked ~ .rating-table tr.hidden-row {
  display: block;
   width: 100%;
  }

 .rating-page-content .rating-table tr.hidden-row {
  display: none;
  }

 .rating-page-content .rating-table tr {
  margin-bottom: 10px;
  }

 .rating-page-content .rating-table td {
  border: 1px solid #374151;
   width: 100%;
   display: block;
  }

 .rating-page-content .mobile-info {
  padding: 10px;
  }

 .rating-page-content .mobile-info .name-cell {
  font-size: 1.2em;
   margin-bottom: 8px;
   overflow-wrap: break-word;
   word-break: break-word;
  }

 .rating-page-content .mobile-info .name-cell .rank-prefix {
  color: #60A5FA;
   font-weight: bold;
   margin-right: 10px;
  }

 .rating-page-content .mobile-info .info-bar {
  display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 15px;
   font-size: 0.9em;
   color: #9CA3AF;
  }

 .rating-page-content .extra-info {
  margin-top: 10px;
   justify-content: flex-start;
  }

}

 .container_media {
  max-width: 1200px;
   margin: 2px auto;
   padding: 25px;
   background: rgba(31, 41, 55, 0.8);
   backdrop-filter: blur(12px);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   animation: fadeIn 1s ease-in-out;
  }

 .gallery-grid, .article-grid {
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 10px;
  }

 .gallery-item, .article-card {
  text-decoration: none;
   color: inherit;
   background: rgba(40, 40, 60, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 8px;
   padding: 15px;
   transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
   cursor: pointer;
   animation: slideUp 0.5s ease forwards;
   opacity: 0;
  }

 .gallery-item:hover, .article-card:hover {
  transform: translateY(-5px);
   background: rgba(40, 40, 60, 0.7);
   box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  }

 .gallery-item .media-container {
  width: 100%;
   height: 160px;
   overflow: hidden;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
  }

 .gallery-item img, .gallery-item video {
  width: 100%;
   height: 100%;
   object-fit: cover;
  }

 .gallery-item h3, .article-card h3 {
  margin-top: 0;
   color: #03dac6;
   font-size: 1em;
  }

 .gallery-item p, .article-card p {
  font-size: 0.85em;
   color: #b0b0b0;
  }

 .item-stats, .article-stats {
  font-size: 0.9em;
   color: #03dac6;
   font-weight: bold;
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

 .gallery-item:nth-child(1), .article-card:nth-child(1) {
  animation-delay: 0.1s;
  }

 .gallery-item:nth-child(2), .article-card:nth-child(2) {
  animation-delay: 0.2s;
  }

 .gallery-item:nth-child(3), .article-card:nth-child(3) {
  animation-delay: 0.3s;
  }

 .gallery-item:nth-child(4), .article-card:nth-child(4) {
  animation-delay: 0.4s;
  }

 .gallery-item:nth-child(5), .article-card:nth-child(5) {
  animation-delay: 0.5s;
  }

 .gallery-item:nth-child(6), .article-card:nth-child(6) {
  animation-delay: 0.6s;
  }

 .single-article .content, .single-item .description {
  margin-top: 20px;
   border-top: 1px solid #444;
   padding: 20px;
   color: #e0e0e0;
  }

 .single-article .content img {
  display: block;
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   animation: zoomIn 0.5s ease;
   margin-top: 15px;
   margin-bottom: 15px;
  }

 .author-info {
  display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 15px;
  }

 .avatar {
  display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
  }

 .author-info .avatar-wrapper {
  width: 24px;
   height: 24px;
  }

 .avatar-wrapper {
  position: relative;
   display: inline-block;
  }

 .highlight-player {
  box-shadow: 0 0 8px 3px #3498db;
   border-radius: 50%;
  }

 .highlight-admin {
  box-shadow: 0 0 8px 3px #e74c3c;
   border-radius: 50%;
  }

 .highlight-moderator {
  box-shadow: 0 0 8px 3px #9b59b6;
   border-radius: 50%;
  }

 .highlight-banned .avatar {
  filter: grayscale(100%);
  }

 .highlight-banned {
  border: 2px solid #555;
   border-radius: 50%;
  }

 .gallery-item .author-info, .article-card .author-info {
  font-size: 0.8em;
   color: #ccc;
   margin-top: 8px;
  }

 .comments-section {
  margin-top: 30px;
   padding-top: 20px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

 .comment {
  background: rgba(45, 45, 65, 0.6);
   padding: 15px;
   border-radius: 8px;
   margin-bottom: 15px;
   position: relative;
   border: 1px solid rgba(255, 255, 255, 0.05);
  }

 .comment .author {
  font-weight: bold;
   color: #03dac6;
  }

 .comment .date {
  font-size: 0.8em;
   color: #aaa;
  }

 .comment-content {
  margin-top: 8px;
  }

 .comment-replies {
  margin-top: 15px;
   border-left: 2px solid rgba(255, 255, 255, 0.1);
   padding-left: 15px;
  }

 .comment-form textarea {
  width: 100%;
   box-sizing: border-box;
   min-height: 80px;
   background: rgba(20, 20, 30, 0.8);
   border: 1px solid #555;
   color: #fff;
   padding: 10px;
   border-radius: 5px;
   margin-bottom: 10px;
  }

 .comment-form button {
  padding: 8px 16px;
   background: #bb86fc;
   color: #121212;
   border: none;
   cursor: pointer;
   border-radius: 5px;
   transition: background .3s;
  }

 .comment-form button:hover {
  background: #9f4ce0;
  }

 .reply-details {
  margin-top: 10px;
  }

 .reply-details summary {
  cursor: pointer;
   color: #bb86fc;
   font-size: 0.9em;
  }

 .reply-form {
  margin-top: 10px;
  }

 .comment .avatar-wrapper {
  width: 32px;
   height: 32px;
  }

 .reactions {
  display: flex;
   gap: 10px;
   align-items: center;
   margin-top: 10px;
  }

 .reaction-form {
  display: inline;
  }

 .reaction-btn {
  background: none;
   border: 1px solid #555;
   color: #b0b0b0;
   cursor: pointer;
   font-size: 0.9em;
   padding: 4px 8px;
   border-radius: 20px;
   transition: all .3s;
  }

 .reaction-btn:hover {
  background: #444;
  }

 .reaction-btn.active {
  color: #fff;
   background: #03dac6;
   border-color: #03dac6;
  }

 .reaction-btn.dislike.active {
  background: #ff6e6e;
   border-color: #ff6e6e;
  }

 .post-like-section {
  margin: 15px 0;
  }

 .post-like-btn {
  background: #5a5a5a;
   color: #fff;
   border: none;
   padding: 8px 15px;
   border-radius: 20px;
   cursor: pointer;
   font-size: 1em;
   transition: background .3s;
  }

 .post-like-btn.active {
  background: #bb86fc;
   color: #121212;
   font-weight: bold;
  }

 .delete-btn {
  background: #ff6e6e;
   color: #fff;
   border: none;
   padding: 2px 8px;
   font-size: 0.8em;
   border-radius: 5px;
   cursor: pointer;
  }

 .back-btn {
  display: inline-block;
   margin-bottom: 3px;
   padding: 8px 16px;
   background: #bb86fc;
   color: #121212;
   text-decoration: none;
   border-radius: 5px;
   transition: background 0.3s;
  }

 .back-btn:hover {
  background: #9f4ce0;
  }

 .tabs {
  display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
   gap: 10px;
   margin-bottom: 5px;
   flex-direction: row;
   align-items: center;
   overflow-y: hidden;
   padding: 4px;
  }

 .tabs a {
  padding: 8px 16px;
   background: rgba(255, 255, 255, 0.05);
   color: #e0e0e0;
   text-decoration: none;
   border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   transition: background 0.3s;
  }

 .tabs a:hover {
  background: #bb86fc;
   color: #121212;
  }

 .tabs a.active {
  background: #03dac6;
   color: #121212;
  }

 .pagination {
  text-align: center;
   margin-top: 5px;
   margin-right: 15px;
   animation: fadeIn 0.5s ease-in-out;
  }

 .pagination a {
  display: inline-block;
   padding: 8px 12px;
   margin: 0 3px;
   background: #bb86fc;
   color: #121212;
   text-decoration: none;
   border-radius: 5px;
   transition: background 0.3s;
  }

 .pagination a:hover {
  background: #9f4ce0;
  }

 .pagination .current {
  background: #03dac6;
   cursor: default;
  }

 .pagination .disabled {
  background: #555;
   cursor: not-allowed;
   pointer-events: none;
  }

 .ck-editor__editable_inline {
  min-height: 150px;
   background: #2c2c4a !important;
   color: #e0e0e0 !important;
  }

 .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
  color: #bb86fc;
  }

 .ck.ck-input-text {
  color: #e0e0e0;
  }

 .pagination .ellipsis {
  padding: 8px 12px;
   color: #ccc;
  }

 .single-item .media {
  margin: 25px 0;
   display: flex;
   justify-content: center;
  }


 @keyframes zoomIn {
  from {
  transform: scale(0.9);
   opacity: 0;
  }

 to {
  transform: scale(1);
   opacity: 1;
  }

}

 @media (max-width: 768px) {
  .container_media {
  padding: 15px;
   margin: 0;
   border-radius: 0;
  }

 .gallery-grid, .article-grid {
  grid-template-columns: 1fr;
   gap: 10px;
  }

 .back-btn {
  padding: 6px 12px;
   font-size: 0.8em;
  }

 .pagination a {
  padding: 6px 10px;
   font-size: 0.8em;
  }

}

 @media (max-width: 480px) {
  h1 {
  font-size: 1.5em;
  }

 h2 {
  font-size: 1.2em;
  }

 .pagination {
  flex-wrap: wrap;
   gap: 2px;
  }

 .pagination a {
  padding: 5px 8px;
  }

}

 .form-container_guide {
  max-width: 1200px;
   margin: 2px auto;
   padding: 25px;
   background: rgba(25, 25, 40, 0.75);
   backdrop-filter: blur(12px);
   border-radius: 15px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #e0e0e0;
  }

 .form-container_guide h1 {
  color: #bb86fc;
   text-align: center;
  }

 .form-group_guide {
  margin-bottom: 20px;
  }

 .form-group_guide label {
  display: block;
   margin-bottom: 8px;
   color: #03dac6;
  }

 .form-group_guide input[type="text"] {
  width: 100%;
   padding: 12px;
   background: #2c2c4a;
   border: 1px solid #555;
   border-radius: 5px;
   color: #fff;
   box-sizing: border-box;
  }

 .form-submit-btn_guide {
  padding: 12px 25px;
   background: #03dac6;
   color: #121212;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 1em;
   font-weight: bold;
   transition: background .3s;
  }

 .form-submit-btn_guide:hover {
  background: #36f7e4;
  }

 .ck-editor__editable_inline {
  min-height: 300px;
   background: #2c2c4a !important;
   color: #e0e0e0 !important;
  }

 .form-container_gallery {
  max-width: 1200px;
   margin: 2px auto;
   padding: 25px;
   background: rgba(25, 25, 40, 0.75);
   backdrop-filter: blur(12px);
   border-radius: 15px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #e0e0e0;
  }

 .form-container_gallery h1 {
  color: #bb86fc;
   text-align: center;
  }

 .form-group_gallery {
  margin-bottom: 20px;
  }

 .form-group_gallery label {
  display: block;
   margin-bottom: 8px;
   color: #03dac6;
  }

 .form-group_gallery input, .form-group_gallery textarea, .form-group_gallery select {
  width: 100%;
   padding: 12px;
   background: #2c2c4a;
   border: 1px solid #555;
   border-radius: 5px;
   color: #fff;
   box-sizing: border-box;
  }

 .form-submit-btn_gallery {
  padding: 12px 25px;
   background: #03dac6;
   color: #121212;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-size: 1em;
   font-weight: bold;
   transition: background .3s;
  }

 .form-submit-btn_gallery:hover {
  background: #36f7e4;
  }

 .gifts_container {
  max-width: 1200px;
   margin: 2px auto;
  }

 .cases-wrapper {
  display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 5px;
   margin-bottom: 5px;
   animation: fadeIn 1s ease-in-out;
  }

 .info_gifts, .case-container {
  background: var(--bg-secondary);
   backdrop-filter: blur(12px);
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   padding: 12px;
   box-shadow: 0 8px 25px rgba(0,0,0,0.5);
   text-align: center;
   max-width: 422px;
   overflow-y: hidden;
  }

 .case, .case-info {
  display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   height: 100%;
  }

 h1, h2, h4 {
  color: var(--text-primary);
  }

 h4 {
  color: var(--text-secondary);
   font-weight: normal;
  }

 .case, .case-info p {
  color: var(--text-secondary);
   flex-grow: 1;
   margin-top: 2px;
  }
  
  .case-info form {
      width: 100%;
  }

 .submit-button_gifts, #showTableBtn {
  background: var(--accent-color);
   border: none;
   border-radius: var(--border-radius);
   padding: 12px 15px;
   margin-bottom: 2px;
   color: var(--text-primary);
   font-weight: 600;
   cursor: pointer;
   font-size: 1rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: var(--transition);
   width: 100%;
   margin-top: auto;
  }

 .submit-button_gifts:hover, #showTableBtn:hover {
  background: var(--accent-hover);
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
  }

 .image-container {
  position: relative;
   display: inline-block;
   cursor: pointer;
  }

 .image-container img.base-image {
  display: block;
   max-width: 150px;
  }

 .image-container img.overlay-image {
  position: absolute;
   top: 0;
   right: 0;
   width: 40px;
   height: auto;
  }

 .info_gifts table {
  width: 100%;
   border-collapse: collapse;
   margin: 2px 0;
   font-size: 0.9em;
  }

 .info_gifts th, .info_gifts td {
  padding: 10px;
   border-bottom: 1px solid var(--border-color);
  }

 .info_gifts th {
  color: var(--accent-color);
  }

 #history-modal-container {
  position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 10000;
   display: none;
   background: rgb(0 0 0 / 96%);
  }

 #history-modal-container iframe {
  width: 100%;
   height: 100%;
   border: none;
  }

 .iframe-close-btn_gifts {
  position: absolute;
   top: 20px;
   right: 25px;
   font-size: 32px;
   font-weight: bold;
   color: var(--text-primary);
   cursor: pointer;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--bg-tertiary);
   border: none;
   transition: all 0.3s ease;
   z-index: 10001;
  }

 .iframe-close-btn_gifts:hover {
  background: var(--accent-color);
   transform: rotate(90deg) scale(1.1);
  }

 @keyframes shake {
  0% {
  transform: translateX(0);
  }

 20% {
  transform: translateX(-5px) rotate(-1deg);
  }

 40% {
  transform: translateX(5px) rotate(1deg);
  }

 60% {
  transform: translateX(-5px) rotate(-1deg);
  }

 80% {
  transform: translateX(5px) rotate(1deg);
  }

 100% {
  transform: translateX(0);
  }

}

 .shake {
  animation: shake 0.4s ease-in-out;
  }

 .case-icon {
  width: 150px;
   height: 150px;
   margin-bottom: 20px;
   animation: float 3s ease-in-out infinite;
  }

 @keyframes float {
  0%, 100% {
  transform: translateY(0);
  }

 50% {
  transform: translateY(-5px);
  }

}

 .case-info h2 {
   color: #ff6f00;
  }

 .open-button {
  width: 100%;
   padding: 15px;
   border: none;
   border-radius: 8px;
   background: #ff6f00;
   color: white;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 1.3em;
   text-transform: uppercase;
  }

 .open-button:hover {
  background: #ff8f00;
  }

 .open-button:disabled {
  background: #555;
   cursor: not-allowed;
  }

 .modal-overlay_gifts {
  display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgb(0 0 0 / 95%);
   z-index: 1099;
  }

 .modal-content_gifts {
  display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: var(--glass-bg);
   backdrop-filter: blur(12px);
   border: 1px solid var(--glass-border);
   border-radius: var(--border-radius);
   z-index: 1100;
   width: 90%;
   max-width: 400px;
   padding: 25px;
   animation: fadeInModal 0.3s ease-in-out;
  }

 .close-btn_gifts {
  position: absolute;
   top: 10px;
   right: 15px;
   font-size: 1.5em;
   cursor: pointer;
   color: white;
   background: none;
   border: none;
   line-height: 1;
  }

 .modal-header_gifts {
  text-align: center;
   margin-bottom: 20px;
  }

 .modal-icon_gifts {
  width: 80px;
   height: 80px;
   object-fit: contain;
  }

 .modal-item-name_gifts {
  font-size: 1.5em;
   color: var(--primary-orange);
   margin-top: 10px;
  }

 .modal-item-desc_gifts {
  color: var(--text-secondary);
   margin: 15px 0;
   font-size: 0.9em;
   text-align: center;
  }

 @media (max-width: 960px) {
  .cases-wrapper {
  grid-template-columns: 1fr;
  }

}

 @media (max-width: 768px) {
  body {
  padding-bottom: 70px;
  }

 .gifts_container {
  margin: 0;
  }

 .info_gifts, .case-container {
  border-radius: 0;
   border-left: none;
   border-right: none;
   max-width: 100%;
  }

 .info_gifts {
  overflow-x: auto;
  }

}

 .disabled-content .cases-wrapper, .disabled-content .info_gifts {
  opacity: 0.4;
   pointer-events: none;
   filter: grayscale(80%);
  }

 .submit-button_gifts:disabled, #showTableBtn:disabled {
  background: #404040;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
  }

 .submit-button_gifts:disabled:hover, #showTableBtn:disabled:hover {
  background: #404040;
  }

 .admin-fab {
  position: fixed;
   bottom: 20px;
   right: 20px;
   width: 60px;
   height: 60px;
   background: var(--primary-orange, #ff6f00);
   border-radius: 50%;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   z-index: 1050;
   transition: all 0.3s ease;
  }

 .admin-fab:hover {
  transform: scale(1.1);
   background: var(--hover-orange, #ff8f00);
  }

 .admin-fab img {
  width: 32px;
   height: 32px;
   filter: invert(1);
  }

 .admin-modal-overlay {
  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 1100;
   display: none;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
  }

 .admin-modal-overlay.visible {
  display: flex;
   opacity: 1;
  }

 .admin-modal-content {
  width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   box-sizing: border-box;
   position: relative;
  }

 .close-admin-modal {
  position: absolute;
   top: 20px;
   right: 25px;
   background: none;
   border: none;
   font-size: 2.5rem;
   color: white;
   cursor: pointer;
   line-height: 1;
   padding: 5px;
  }

 .moderator_tab {
  background: transparent;
   backdrop-filter: none;
   border: none;
   box-shadow: none;
   padding: 1.5rem;
   width: 100%;
   max-width: 500px;
   color: #e0e0e0;
   display: flex;
   flex-direction: column;
   align-items: center;
  }

 .moderator_tab a {
  display: block;
   font-size: 1.8em;
   font-weight: 600;
   margin-bottom: 20px;
   color: #ffffff;
   text-align: center;
   text-decoration: none;
  }

 .panel-buttons-container {
  width: 100%;
   display: flex;
   flex-direction: column;
   gap: 12px;
  }

 .submit-button_admin {
  background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 10px;
   padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
   color: #e0e0e0;
   font-size: 1em;
   font-weight: 500;
   text-align: left;
   width: 100%;
  }

 .submit-button_admin:hover {
  background: rgba(255, 255, 255, 0.1);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   transform: translateY(-2px);
  }

 .submit-button_admin img {
  width: 28px;
   height: 28px;
   object-fit: contain;
  }

 .button-text_admin {
  flex-grow: 1;
  }

 @media (max-width: 600px) {
  .admin-fab {
  width: 45px;
   height: 45px;
   bottom: 75px;
   right: 5px;
  }

 .admin-fab img {
  width: 28px;
   height: 28px;
  }

 .close-admin-modal {
  top: 10px;
   right: 15px;
  }

 .moderator_tab a {
  font-size: 1.5em;
  }

}

 .playerinfo {
  display: flex;
   flex-direction: row;
   align-items: flex-start;
   padding: 1.5rem;
   width: 100%;
   min-width: 590px;
   margin: 1px auto;
   background: var(--glass-bg);
   backdrop-filter: var(--blur);
   border: 1px solid var(--glass-border);
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   z-index: 10;
  }

 .logo__profile {
  width: 120px;
   height: 120px;
   border-radius: 50%;
   overflow: hidden;
   margin-right: 1.5rem;
   border: 2px solid var(--glass-border);
   flex-shrink: 0;
  }

 .profile-photo {
  width: 100%;
   height: 100%;
   object-fit: cover;
  }
  

 .text_info_player {
  display:flex;
   flex-direction:column;
   text-align: left;
   color: var(--text-primary);
   font-size: 1rem;
   flex-grow: 1;
  }

 .text_info_player span {
  display: inline-block;
  }

 .text_info_player p {
  margin: 0.5rem 0;
   font-size: 0.9rem;
   color: var(--text-secondary);
  }

 .char-popup-btn_player, .popup-btn_player {
  background: #007eff3b;
   border: none;
   border-radius: 8px;
   padding: 0.5rem 1rem;
   cursor: pointer;
   font-size: 1rem;
   color: var(--text-primary);
   transition: background 0.3s ease, transform 0.2s ease;
   max-width: 160px;
   margin-bottom: 2px;
   display: flex;
   justify-content: flex-start;
   text-align: left;
  }

 .char-popup-btn_player:hover, .popup-btn_player:hover {
  background: var(--hover-orange);
   transform: translateY(-2px);
  }

 .modal-overlay_player {
  display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background: rgb(0 0 0 / 93%);
  ;
   z-index: 1099;
  }

 .info-box.warning {
  background: rgba(255, 111, 0, 0.1);
   border: 1px solid var(--primary-orange);
   border-radius: 8px;
   padding: 5px;
  }

 .character-popup, .popup-content {
  display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   max-width: 600px;
   max-height: 80vh;
   background: var(--glass-bg);
   backdrop-filter: var(--blur);
   border: 1px solid var(--glass-border);
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   padding: 2rem;
   z-index: 1100;
   color: var(--text-primary);
   animation: fadeInModal 0.3s ease-in-out;
   overflow-y: auto;
  }

 .character-list {
  display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1rem;
  }

 .character-card {
  background: rgba(0,0,0,0.3);
   padding: 1rem;
   border-radius: 10px;
   border: 1px solid var(--glass-border);
   font-size: 0.9rem;
   transition: transform 0.2s ease;
  }

 .character-card:hover {
  transform: translateY(-4px);
  }

 .popup-content ul {
  list-style: none;
   padding: 0;
   margin: 1rem 0 0 0;
  }

 .popup-content li {
  margin: 0.75rem 0;
   font-size: 0.9rem;
  }

 .close-btn_player {
  position: absolute;
   top: 1rem;
   right: 1rem;
   background: none;
   border: none;
   color: var(--text-primary);
   font-size: 1.5rem;
   cursor: pointer;
   transition: color 0.3s ease;
   z-index: 1004;
   line-height: 1;
  }

 .close-btn_player:hover {
  color: var(--primary-orange);
  }


 .prof_buttons {
  margin-top: 1rem;
   font-size: 0.9rem;
   color: var(--text-secondary);
  }

 .prof_buttons p {
  margin: 0;
  }

 .message_warning {
  margin: 1rem 0;
   overflow: hidden;
   transition: all 0.4s ease;
  }

 .message_warning:not(.active) {
  border: none;
   border-radius: 0;
   background: transparent;
   backdrop-filter: none;
   padding: 0;
   margin: 0rem 0;
  }

 .message_warning.active {
  border: 1px solid var(--glass-border);
   border-radius: 12px;
   background: var(--glass-bg);
   backdrop-filter: var(--blur);
   padding: 0;
  }

 .spoiler-toggle {
  cursor: pointer;
   user-select: none;
   transition: all 0.3s ease;
  }

 .message_warning:not(.active) .spoiler-toggle {
  padding: 0;
   background: transparent;
   border: none;
   font-weight: normal;
   font-size: 0.9rem;
   color: var(--text-secondary);
   display: inline-flex;
   align-items: center;
   justify-content: flex-start;
  }

 .message_warning.active .spoiler-toggle {
  padding: 0.75rem 1rem;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--text-primary);
  }

 .message_warning:not(.active) .spoiler-toggle::after {
  display: none;
  }

 .message_warning.active .spoiler-toggle::after {
  content: '▲';
   transition: transform 0.3s ease;
  }

 .notification-indicator {
  display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   animation: indicatorPulse 2s infinite ease-in-out;
   cursor: pointer;
  }

 .notification-icon {
  font-size: 1.2rem;
   animation: iconShake 3s infinite ease-in-out;
   filter: drop-shadow(0 0 8px var(--primary-orange));
  }

 .notification-text {
  color: var(--primary-orange);
   font-size: 0.85rem;
   font-weight: bold;
   text-shadow: 0 0 10px var(--primary-orange);
   animation: textGlow 2s infinite ease-in-out;
  }

 .notification-dot {
  width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--primary-orange);
   animation: dotPulse 1.5s infinite ease-in-out;
   box-shadow: 0 0 8px var(--primary-orange);
  }

 .message_warning.active .notification-indicator {
  display: none;
  }

 .spoiler-content {
  max-height: 0;
   overflow: hidden;
   padding: 0 1rem;
   transition: max-height 0.4s ease;
   color: var(--text-primary);
  }

 .message_warning.active .spoiler-content {
  padding: 0.75rem 1rem 1rem 1rem;
  }

 .full-title {
  display: none;
  }

 .message_warning.active .full-title {
  display: inline;
  }

 @keyframes indicatorPulse {
  0%, 100% {
  transform: scale(1);
   opacity: 0.8;
  }

 50% {
  transform: scale(1.05);
   opacity: 1;
  }

}

 @keyframes iconShake {
  0%, 100% {
  transform: rotate(0deg) scale(1);
  }

 10% {
  transform: rotate(-5deg) scale(1.1);
  }

 20% {
  transform: rotate(5deg) scale(1.1);
  }

 30% {
  transform: rotate(-3deg) scale(1.05);
  }

 40% {
  transform: rotate(3deg) scale(1.05);
  }

 50% {
  transform: rotate(0deg) scale(1);
  }

}

 @keyframes textGlow {
  0%, 100% {
  text-shadow: 0 0 5px var(--primary-orange);
   opacity: 0.9;
  }

 50% {
  text-shadow: 0 0 15px var(--primary-orange), 0 0 25px var(--primary-orange);
   opacity: 1;
  }

}

 @keyframes dotPulse {
  0%, 100% {
  transform: scale(1);
   box-shadow: 0 0 5px var(--primary-orange);
  }

 50% {
  transform: scale(1.4);
   box-shadow: 0 0 15px var(--primary-orange);
  }

}

 .server-stats-container {
  width: 100%;
   max-width: 900px;
   padding: 0.5rem;
   background: var(--glass-bg);
   backdrop-filter: var(--blur);
   border: 1px solid var(--glass-border);
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   color: var(--text-primary);
   margin: 1px auto;
  }

 .server-stats-container h2 {
  text-align: center;
   color: var(--primary-orange);
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-size: 0.9rem;
  }

 .server-grid {
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 0.2rem;
  }

 .server-card {
  background: rgba(0,0,0,0.3);
   padding: 0.25rem;
   border-radius: 10px;
   border: 1px solid var(--glass-border);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

 .server-card:hover {
  transform: translateY(-5px);
   box-shadow: 0 0 20px rgba(255, 111, 0, 0.3);
  }

 .server-card h3 {
  margin-top: 0;
   margin-bottom: 0.5rem;
   color: var(--text-primary);
   border-bottom: 1px solid var(--primary-orange);
   padding-bottom: 0.5rem;
   font-size: 0.9rem;
  }

 .server-card ul {
  list-style: none;
   padding: 0;
   margin: 0;
   font-size: 0.95rem;
  }

 .server-card li {
  margin-bottom: 0.2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 2px;
  }

 .server-card li:last-child {
  margin-bottom: 0;
  }

 .server-card li strong {
  color: var(--text-secondary);
   margin-right: 10px;
  }

 .server-card li span {
  text-align: right;
   color: var(--primary-orange);
   font-weight: bold;
  }

 .server-card .player-name {
  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 150px;
  }

 .coin-icon {
  height: 25px;
   width: 25px;
   vertical-align: middle;
   margin-left: 1px;
  }

 .ban-info-container {
  width: 100%;
   max-width: 900px;
   margin: 1px auto;
   padding: 1rem;
   background: var(--glass-bg);
   backdrop-filter: var(--blur);
   border: 1px solid var(--glass-border);
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   color: var(--text-primary);
  }

 .ban-active-warning {
  background: var(--danger-bg);
   border: 1px solid var(--danger-color);
   padding: 1rem;
   border-radius: 8px;
   margin-bottom: 1rem;
  }

 .ban-active-warning h3 {
  margin: 0 0 0.5rem 0;
   color: var(--danger-color);
   font-size: 1.1rem;
  }

 .ban-active-warning p {
  margin: 0.25rem 0;
   color: var(--text-primary);
  }

 .ban-history-button {
  background: #4b5563;
   color: var(--text-primary);
   border: 1px solid var(--glass-border);
   padding: 0.6rem 1.2rem;
   border-radius: 8px;
   cursor: pointer;
   transition: var(--transition);
   font-size: 0.9rem;
   display: block;
   width: 100%;
   text-align: center;
  }

 .ban-history-button:hover {
  background: #6b7280;
   transform: translateY(-2px);
  }

 #banHistoryPopup h2 {
  text-align: center;
   color: var(--primary-orange);
   margin-top: 0;
   margin-bottom: 1.5rem;
  }

 .ban-history-list {
  list-style: none;
   padding: 0;
   margin: 0;
  }

 .ban-history-item {
  background: rgba(0,0,0,0.3);
   padding: 1rem;
   border-radius: 10px;
   border: 1px solid var(--glass-border);
   margin-bottom: 1rem;
  }

 .ban-history-item:last-child {
  margin-bottom: 0;
  }

 .ban-history-item p {
  margin: 0.4rem 0;
   font-size: 0.9rem;
  }

 .ban-history-item strong {
  color: var(--text-secondary);
   min-width: 120px;
   display: inline-block;
  }

 .ban-status {
  font-weight: bold;
  }

 .ban-status.active {
  color: var(--danger-color);
  }

 .ban-status.expired {
  color: var(--success-color);
  }

 #banHistoryOverlay {
  z-index: 1100;
  }

 #banHistoryPopup {
  z-index: 1101;
  }

 @media (min-width: 768px) {
  .playerinfo {
  max-width: 900px;
   padding: 2rem;
  }

 .logo__profile {
  width: 128px;
   height: 128px;
   margin-right: 2rem;
  }

 .text_info_player {
  font-size: 1.1rem;
  }

 .character-card, .popup-content li {
  font-size: 1rem;
  }

 .prof_buttons {
  font-size: 1rem;
  }

}

 @media (max-width: 550px) {
  .playerinfo {
  padding: 1.5rem;
   min-width: 300px;
   border-radius: 0px;
   flex-direction: row;
   align-items: flex-start;
   max-width: 100%;
   margin: 0;
  }

 .server-stats-container, .ban-info-container {
  border-radius: 0;
   margin-top: 1px;
  }

 .logo__profile {
  width: 100px;
   height: 100px;
   margin-right: 1rem;
  }

 .text_info_player {
  font-size: 1rem;
  }

 .char-popup-btn_player, .popup-btn_player {
  padding: 0.4rem 0.8rem;
   font-size: 0.8rem;
  }

 .character-popup, .popup-content {
  padding: 1.5rem 1rem;
   font-size: 0.9rem;
  }

 .character-list, .popup-content ul {
  margin: 1rem 0 0 0;
  }

 .close-btn_player {
  top: 0.5rem;
   right: 0.5rem;
   font-size: 1.4rem;
  }

 .message_warning {
  font-size: 0.9rem;
  }

}

 .ck.ck-editor__main > .ck-editor__editable {
  background: rgba(0, 0, 0, 0.2);
   color: #e0e0e0;
  }

 .ck-content h2 {
  font-size: 1.5em;
   font-weight: bold;
  }

 .ck-content h3 {
  font-size: 1.3em;
   font-weight: bold;
  }

 .ck-content p {
  margin: 0 0 1em;
  }

 .ck-content blockquote {
  padding: 10px 20px;
   margin: 0 0 20px;
   font-size: 1.1em;
   border-left: 5px solid rgba(255, 255, 255, 0.3);
   background: rgba(0,0,0,0.2);
  }

 .ck-content ul, .ck-content ol {
  margin-left: 25px;
   margin-bottom: 1em;
  }

 .news_feed {
  background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   margin: 1px auto;
   max-width: 600px;
   color: #e0e0e0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

 .post-form {
  background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 10px;
   padding: 15px;
   margin-bottom: 20px;
  }

 .post-form label {
  font-size: 1.2em;
   font-weight: 500;
   color: #ffffff;
   text-align: center;
  }

 .post-form input[type="text"], .post-form textarea {
  width: 100%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   padding: 10px;
   color: #e0e0e0;
   font-size: 1em;
   margin-top: 5px;
   box-sizing: border-box;
  }

 .post-form textarea {
  resize: vertical;
  }

 .post-form input[type="submit"] {
  background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   padding: 10px 20px;
   color: #ffffff;
   font-size: 1em;
   cursor: pointer;
   transition: all 0.3s ease;
  }

 .post-form input[type="submit"]:hover {
  background: rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   transform: translateY(-2px);
  }

 .posts {
  max-height: calc(100vh - 230px);
   overflow-y: auto;
   scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.5);
   margin-top: 2px;
  }

 .posts::-webkit-scrollbar {
  width: 8px;
  }

 .posts::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.5);
   border-radius: 4px;
  }

 .posts::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
   border-radius: 4px;
  }

 .posts::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
  }

 .posts h3 {
  font-size: 1.4em;
   color: #ffffff;
   margin-bottom: 5px;
   text-align: center;
  }

 .post-content {
  background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 10px;
   padding: 15px;
   margin: 10px auto;
   width: 90%;
   text-align: left;
   color: #e0e0e0;
  }

 .posts p {
  color: #b0b0b0;
   font-size: 0.9em;
   margin: 10px;
  }

 .posts hr {
  border: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   margin: 15px 0;
  }

 .delete-form {
  display: inline;
  }

 .delete-form input[type="submit"] {
  background: rgba(255, 0, 0, 0.2);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 0, 0, 0.3);
   border-radius: 8px;
   padding: 8px 16px;
   color: #ff6666;
   font-size: 0.9em;
   cursor: pointer;
   transition: all 0.3s ease;
  }

 .delete-form input[type="submit"]:hover {
  background: rgba(255, 0, 0, 0.3);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   transform: translateY(-2px);
  }

 .pagination {
  display: flex;
   gap: 1px;
   margin-top: 5px;
   flex-wrap: wrap;
  }

 .pagination a, .pagination span {
  background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   padding: 8px 12px;
   color: #e0e0e0;
   text-decoration: none;
   font-size: 1em;
   transition: all 0.3s ease;
  }

 .pagination span {
  background: none;
   border: none;
   color: #b0b0b0;
  }

 .pagination a:hover {
  background: rgba(255, 255, 255, 0.2);
   transform: translateY(-2px);
  }

 .pagination a.active {
  background: rgba(255, 255, 255, 0.3);
   font-weight: bold;
  }

 .news_feed:empty {
  display: none;
  }

 @media (max-width: 550px) {
  .news_feed {
  max-width: 100%;
   margin: 5px auto;
   border-radius: 0px;
  }

 .post-form {
  padding: 10px;
  }

 .post-form input[type="text"], .post-form textarea {
  font-size: 0.9em;
   padding: 8px;
  }

 .post-form input[type="submit"], .delete-form input[type="submit"], .pagination a, .pagination span {
  padding: 6px 10px;
   font-size: 0.9em;
  }

 .posts {
  max-height: calc(100vh - 390px);
  }

 .posts h3 {
  font-size: 1.2em;
  }

 .post-content {
  padding: 10px;
   width: 95%;
  }

}

 .container_about {
  max-width: 1200px;
   margin: 2px auto;
  }

 .container_about h1 {
  font-size: 2.8rem;
   color: #bb86fc;
   margin-bottom: 15px;
   text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
   position: relative;
   display: inline-block;
  }

 .container_about h1::after {
  content: '';
   position: absolute;
   bottom: -10px;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 4px;
   background: linear-gradient(90deg, transparent, #bb86fc, transparent);
   border-radius: 2px;
  }

 .container_about h2 {
  font-size: 2rem;
   color: #bb86fc;
   margin-bottom: 20px;
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
  }

 .text-container_about {
  background: rgba(31, 41, 55, 0.8);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
   padding: 30px;
   margin-bottom: 5px;
   position: relative;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

 .text-container_about:hover {
  transform: translateY(-5px);
   box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
  }

 .text-container_about::before {
  content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, #03dac6, #bb86fc, #cf6679);
   opacity: 0.7;
  }

 .container_about p {
  margin-bottom: 20px;
   font-size: 1.1rem;
   text-align: justify;
  }

 .section-icon {
  font-size: 24px;
   color: #03dac6;
  }

 .expand-btn {
  background: linear-gradient(90deg, #bb86fc, #03dac6);
   color: white;
   border: none;
   padding: 12px 25px;
   border-radius: 30px;
   cursor: pointer;
   font-weight: bold;
   display: block;
   margin: 20px auto 0;
   transition: all 0.3s ease;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

 .expand-btn:hover {
  transform: scale(1.05);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  }

 .hidden-content {
  max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s ease-out;
  }

 .slide-in {
  animation: slideIn 0.8s ease-out;
  }


 @media (max-width: 768px) {
  .container_about h1 {
  font-size: 2.2rem;
  }

 .container_about h2 {
  font-size: 1.7rem;
  }

 .text-container_about {
  padding: 20px;
   border-radius: 0px;
   margin-bottom: 5px;
  }

}