body {
  background: #181818;
  font-family: 'Segoe UI', sans-serif;
  color: #fff;
  margin: 0;
  padding: 0;
}
 



/* my ganme container start  */

  .game-container {
    max-width: 100%;
    /* margin: 0vw 0vw 0vw 0vw; */
    padding: 20px 0px 5px 15px;
  }
 
  .game-header {
    display: flex;
    gap: 4.7vw;
    flex-wrap: wrap;
    align-items: center;
  }
   
  .game-Image{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  text-align: center;
  border: 2px solid #ffffff22;
  border-radius: 10px;
  background-color: #1e1e1e;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: transform 0.3s, box-shadow 0.3s;
  }
   
  .game-header img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #333;
  transition: transform 0.2s
  }

  .game-info h1 {
   font-size: 1.5rem;
   max-width: 55vw;
   margin: 0 0 0rem 0;
   letter-spacing: 2px;
   text-transform: uppercase;
   font-family: "Acme", sans-seri ;
  }
  
  .clickable-publisher-top {
   font-family: "Poppins", sans-serif ;
   font-family: 'Exo 2', sans-serif;
   font-size: 1.3rem;
   cursor: pointer;
   color: #2ecc71;
 }

.game-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}

.meta-item {
  background: #1f1f1f;
  padding: 0.2rem 0.3rem;
  border: 1px solid #444;
  border-radius: 10px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
}



.like-dislike-box {
  margin-top: 8px;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.like-dislike-box button {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}


.like-dislike-box button.active, .Fav-box-2 button.active {
  background-color: #00d26a;
  font-weight: bold;
}

.like-dislike-box button.active span:first-child , .Fav-box-2{
  color: yellow; 
}


.like-dislike-box button span:first-child , .Fav-box-2 span:first-child{
  transition: color 0.3s;
}
.like-dislike-box i , .Fav-box-2 i{
  color: #fff;
  transition: color 0.3s ease;
}

.like-dislike-box button.active i , .Fav-box-2 button.active i{
  color: yellow;
}

.like-dislike-box button.active , .Fav-box-2 button.active{
  background-color: #00d26a;
}

.Fav-box-2 {
  margin-top: 8px;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.Fav-box-2 button {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.game-rating {
  background-color: #2a2a2a;
  border-radius: 10px;
  border: 1px solid #444;
  padding: 0.1rem 0.5rem;
  margin-top: 8px;
  font-size: 2rem;
  color: #777;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.game-rating .star {
  cursor: pointer;
  color: #444;
  font-size: 1.5rem;
  transition: color 0.3s;
}

.game-rating .star,
#rating-value,
#rating-count {
  display: inline-block; 
  vertical-align: middle;
  margin-right: 0.3rem; 
}

#rating-value,
#rating-count {
  position: relative;
  top: 2px;
}

#rating-value {
  font-size: 1.5rem;
  color: #ccc;
}

#rating-count {
 font-size: 1.2rem; 
 color: #aaa; 
 margin-left: 1px;
}

.game-rating .star.hover,
.game-rating .star.active {
  color: gold;
}




.far.fa-star, 
.fas.fa-star { 
  background: none !important;
  color: #ffd700;
}

.far.fa-star:hover, 
.fas.fa-star:hover { 
  transform: scale(1.2); 
  text-shadow: 0 0 5px #0ff, 0 0 7px #0ff, 0 0 1px #0ff;
}

.remove-btn {
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}


/* Star colors by mode */
.game-rating .average-rated {
  color: gold;
}

.game-rating .user-rated {
  color: #ffd700;
  text-shadow: 0 0 6px #00ffe1;
}

.game-rating .preview-rated {
  color: #ccc;
}



/* Size , version , punlisher , series */
.details-container {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 0.5rem;
}

.detail {
  background: #1a1a1a;
  padding: 1rem 0.5rem;
  border-radius: 12px;
  font-size: 0.8rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.2s ease;
}
.detail:hover {
  transform: scale(1.06);
}
/* Size , version , punlisher , series */




/* Download Section start */

.download-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 10px 20px 50px 0px;
}

.download-section::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  transition: width 0.4s ease;
}

.download-btn:hover ~ .download-section::after,
.download-section:hover::after {
  width: 200px;
}

.download-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 65px;
  background: linear-gradient(45deg, rgba(0, 255, 153, 0.2), rgba(0, 153, 76, 0.2));
  border-radius: 15px;
  border: 1px solid rgba(0, 255, 153, 0.4);
  color: #e6ffd9;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 20px rgba(0, 255, 153, 0.3), inset 0 0 12px rgba(0, 153, 76, 0.15);
  transition: all 0.3s ease;
  animation: float 5s infinite ease-in-out;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.icon48 {
  position: absolute;
  width: 60px ;
  height: 45px ;
  left: -15.5%;
  perspective: 1000px;
  transition: transform 0.4s ease;
}

.icon48::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 55%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e6ffd9" stroke-width="2"><path d="M12 15V3m0 12l-4-4m4 4l4-4M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/></svg>') no-repeat center;
  background-size: contain;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.icon48::after {
  content: '';
  position: absolute;
  width: 150%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff99, transparent);
  top: 10%;
  left: 100%;
  transform: translateY(-50%);
  opacity: 0;
  transition: left 0.6s ease, opacity 0.6s ease;
}

.text48 {
  position: relative;
  left: 25px;
  z-index: 1;
  font-size: 22px;
  text-shadow: 0 0 8px rgba(0, 255, 153, 0.5);
}

.light-beams {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.light-beams::before,
.light-beams::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 0px;
  background: linear-gradient(to bottom, #00ff99, transparent);
  opacity: 0;
  transition: height 0.5s ease, opacity 0.5s ease;
}

.light-beams::before {
  top: 0;
  left: 15.5%;
}

.light-beams::after {
  bottom: 0;
  right: 15%;
}

.gravity-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 255, 153, 0.1), transparent);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
  z-index: 0;
}

.internal-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.internal-lines::before,
.internal-lines::after,
.internal-lines span::before {
  content: '';
  position: absolute;
  background: #00ff99;
  box-shadow: 0 0 8px #00ff99;
  opacity: 0;
  transition: all 0.4s ease;
}

.internal-lines::before {
  width: 70%;
  height: 1px;
  left: 50%;
}

.internal-lines::after {
  width: 70%;
  height: 1px;
  bottom: 0;
  right: 50%;
}

.internal-lines span::before {
  width: 1px;
  height: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.lightning {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.lightning::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent, rgba(0, 255, 153, 0.3), transparent);
  clip-path: polygon(10% 10%, 20% 40%, 30% 10%, 40% 50%, 50% 20%, 60% 60%, 70% 30%, 80% 70%, 90% 40%);
  opacity: 0;
  transition: opacity 0.2s ease;
  animation: thunder-flash 2s infinite alternate ease-in-out;
}

@keyframes thunder-flash {
  0%, 80% { opacity: 0; }
  82% { opacity: 0.5; }
  84% { opacity: 0.2; }
  86% { opacity: 0.6; }
  88% { opacity: 0.3; }
  90% { opacity: 0.7; }
  100% { opacity: 0.4; }
}

.download-btn:hover {
  background: linear-gradient(45deg, rgba(0, 255, 153, 0.3), rgba(0, 153, 76, 0.3));
  /* box-shadow: 0 0 40px rgba(0, 255, 153, 0.6), 0 0 60px rgba(0, 153, 76, 0.4); */
  transform: translateY(-3px);
}

.download-btn:hover .icon48::before {
  transform: rotateY(360deg);
  filter: drop-shadow(0 0 8px #00ff99);
}

.download-btn:hover .icon48::after {
  left: -50%;
  opacity: 1;
}

.download-btn:hover .light-beams::before,
.download-btn:hover .light-beams::after {
  height: 50%;
  opacity: 1;
}

.download-btn:hover .gravity-pulse {
  transform: translate(-50%, -50%) scale(1);
}

.download-btn:hover .internal-lines::before,
.download-btn:hover .internal-lines::after,
.download-btn:hover .internal-lines span::before {
  opacity: 1;
}

.download-btn:hover .lightning::before {
  animation: thunder-flash 0.5s infinite alternate ease-in-out;
}

.download-btn:active .gravity-pulse {
  transform: translate(-50%, -50%) scale(0.5);
  transition: transform 0.2s ease;
}

@keyframes distortion {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(0.3px, -0.3px); }
}

.download-btn:hover .text48 {
  animation: distortion 0.15s ease 2;
}

.download-btn.loading .text48,
.download-btn.loading .icon48::before {
  opacity: 0;
}

.download-btn.loading .icon48::after {
  content: '';
  width: 24px;
  height: 24px;
  border: 3px solid transparent;
  border-top: 3px solid #e6ffd9;
  border-right: 3px solid #e6ffd9;
  border-radius: 50%;
  top: 50%;
  opacity: 1;
  animation: quantum-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes quantum-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.download-btn:disabled {
  background: rgba(40, 40, 40, 0.5);
  color: #666666;
  border-color: rgba(40, 40, 40, 0.5);
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}

.download-btn:disabled .icon48::before {
  opacity: 0.3;
}

/* Download Section End */


/* Genre section Block */
.genre-section {
  background: #222;
  padding: 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.genre-section h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #00d26a;
  border-left: 4px solid #00d26a;
  padding-left: 0.5rem;
}

.genre-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  cursor: pointer;
}

.tag {
  background: #264733;
  padding: 0.35rem 0.9rem;
  border-radius: 30px;
  font-size: 0.85rem;
  color: #fff;
  transition: background 0.3s;
}
.tag:hover {
  background: #00d26a;
  color: #000;
}
/* Genre section Block End*/
 

/* About section for game Start*/
.about-game-section {
  background: #1a1a1a;
  padding: 2rem;
  margin-top: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  line-height: 1.6;
}

.about-game-section h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #00d26a;
  border-left: 4px solid #00d26a;
  padding-left: 0.6rem;
}

.about-game-section p {
  font-size: 1rem;
  color: #ddd;
}

/* About section for game End*/


/* .media-showcase & video trailer for game Start*/

 .media-showcase {
 margin: 30px 0px;
 }

.media-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: thin;
}

.media-scroll::-webkit-scrollbar {
  height: 1px;
}
.media-scroll::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

.media-item {
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  flex-shrink: 0;
  transition: transform 0.3s;
}

.media-item:hover {
  transform: scale(1.05);
}


.video-trailer {
  height: 53vw;
  position: relative;
  overflow: hidden;
}

.video-trailer iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.media-item:not(.video-trailer) {
  height: 53vw;
  object-fit: cover;
  aspect-ratio: 16/9;
}

/* .media-showcase & video trailer for game End*/





/*  Join US social icon css start */
 .container {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
  margin: 0px 10px;
 }
      
 .icon {
  width: 160px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, border-radius 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-decoration: none;
 }
    
 
 .icon .hover-text {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 2;
 }
   
 .icon:hover .hover-text {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
 }
        
 /* Instagram Icon */
 .instagram {
  background: linear-gradient(90deg, #ff9a8b, #ff6a88, #4c68d7);
 }
    
 .instagram i {
  color: white;
  font-size: 35px;
  z-index: 2;
  transition: 0.3s;
 } 
     
 .instagram:hover i {
  animation: pulse-icon 0.5s ease;
 }
      
 .instagram:hover {
  transform: rotate(8deg);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(255, 106, 136, 0.7);
  background: linear-gradient(45deg, rgba(29, 161, 242, 0.5), transparent), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-12 15 100 100"><path d="M50 50 L50 20 A30 30 0 0 1 80 50 A30 30 0 0 1 50 80 A30 30 0 0 1 20 50 A30 30 0 0 1 50 20" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="5"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite" /><animate attributeName="stroke-width" values="6;10;6" dur="1.5s" repeatCount="indefinite" /></path></svg>');
  background-size: contain, 83% 140% ;
 }
       
 @keyframes pulse-icon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
 } 
      
 /* X (Twitter) Icon */
 .x {
  background: #111827;
 }
       
 .x i {
  color: white;
  font-size: 35px;
  z-index: 2;
  transition: 0.3s;
 }
        
 .x:hover i {
  animation: flip-icon 0.6s ease;
 }
      
 .x:hover {
  transform: scale(1.15);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(29, 161, 242, 0.7);
  background: linear-gradient(45deg, rgba(29, 161, 242, 0.5), transparent), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 20 80 80"><g><circle cx="30" cy="30" r="3" fill="rgba(255,255,255,0.5)"><animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.5;0.8;0.5" dur="1.5s" repeatCount="indefinite" /></circle><circle cx="70" cy="30" r="3" fill="rgba(255,255,255,0.5)"><animate attributeName="r" values="3;5;3" dur="1.7s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.5;0.8;0.5" dur="1.7s" repeatCount="indefinite" /></circle><circle cx="50" cy="70" r="3" fill="rgba(255,255,255,0.5)"><animate attributeName="r" values="3;5;3" dur="1.6s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.5;0.8;0.5" dur="1.6s" repeatCount="indefinite" /></circle><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="4s" repeatCount="indefinite" /></g><circle cx="50" cy="50" r="5" fill="rgba(29,161,242,0.4)"><animate attributeName="cx" values="50;60;50;40;50" dur="2s" repeatCount="indefinite" /><animate attributeName="cy" values="50;40;50;60;50" dur="2s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.4;0.7;0.4" dur="2s" repeatCount="indefinite" /></circle><circle cx="50" cy="50" r="5" fill="rgba(29,161,242,0.4)"><animate attributeName="cx" values="50;40;50;60;50" dur="2.2s" repeatCount="indefinite" /><animate attributeName="cy" values="50;60;50;40;50" dur="2.2s" repeatCount="indefinite" /><animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.2s" repeatCount="indefinite" /></circle></svg>');
   background-size: cover, 60% 140%;
}
     
 @keyframes flip-icon {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
 }
      
 /* Discord Icon */
 .discord {
  background: #4b56d2;
 }
     
 .discord i {
  color: white;
  font-size: 35px;
  z-index: 2;
  transition: 0.3s;
 }
        
 .discord:hover i {
  animation: wobble 0.5s ease;
 }
      
 .discord:hover {
  transform: rotate(-8deg);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(88, 101, 242, 0.7);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=" -15 10 100 100"><rect x="20" y="20" width="60" height="60" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="10"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.2s" repeatCount="indefinite" /></rect></svg>'), #4b56d2;
  background-size: 25vw 16vw ,100% 10%;
 }
 
 @keyframes wobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
 }

/* Join Us Heading */
.overlay45, .more-games  {
    width: 100%;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.2; }
}

.join-us {
    font-family: "Inknut Antiqua", serif;
}

.join-us, .more-games {
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
    font-weight: 700;
    color: transparent;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin: 0;
    padding: 0px 0;
    cursor: default;
}
.more-games {
    display: inline-block;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #5b6ed6, #7ef788);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
    position: relative;
    font-family: 'Jockey One', sans-serif;
}

.join-us span {
    display: inline-block;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
    position: relative;
}

.join-us span:hover  {
    transform: translateY(-5px) scale(1.1);
    text-shadow: 0 0 15px rgba(255, 107, 107, 0.9), 0 0 25px rgba(78, 205, 196, 0.7);
    filter: brightness(1.4);
}

.join-us span:nth-child(odd), .more-games  {
    animation: subtle-wave 1.5s infinite;
}

.join-us span:nth-child(even), .more-games  {
    animation: subtle-wave 1.5s infinite 0.15s;
}

@keyframes subtle-wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.join-us::before {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff6b6b, #4ecdc4, transparent);
    transition: width 0.5s ease;
    z-index: 1;
}

.join-us:hover::before {
    width: 80%;
}

.join-us span::after {
    content: '';
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #4ecdc4;
    transition: width 0.3s ease;
    opacity: 0;
}

.join-us span:hover::after {
    width: 80%;
    opacity: 1;
}

/*  Join US social icon css End */



/*  Suggestions For more games CSS  */

.suggestions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: start;
  /* margin-top: 40px; */
  margin-bottom: 30px;
}

@media screen and (min-width: 1000px){
 .suggestions-grid {
   margin-bottom: 50px;
 }
}
@media screen and (min-width: 2000px){
 .suggestions-grid {
   margin-bottom: 70px;
 }
}
@media screen and (min-width: 3000px){
 .suggestions-grid {
   margin-bottom: 85px;
 }
}
@media screen and (min-width: 3000px){
 .suggestions-grid {
   margin-bottom: 100px;
 }
}
/*  Suggestions For more games CSS Complete  */



/* comment section CSS Start */

.comment-section {
  background: #1a1a1a;
  padding: 2rem 10px;
  margin: 2rem 0px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #eee;
}


.comment-section h2 {
  font-size: 1.5rem;
  color: #00d26a;
  margin-bottom: 0.8rem;
  font-weight: 700;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.comment-form input,
.comment-form textarea {
  background: #2a2a2a;
  border: none;
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  color: #eee;
  transition: background-color 0.3s;
  resize: vertical;
  min-height: 40px;
}

.comment-form textarea {
  min-height: 80px;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: 2px solid #00d26a;
  background: #1f1f1f;
}

.name-input-wrapper {
  display: flex;
  align-items: center;
  width: 50%;
  gap: 0.5rem;
}

#comment-name {
  flex: 1;
  padding: 0.8rem;
  border-radius: 8px;
  border: none;
  background: #2a2a2a;
  color: white;
  font-size: 1rem;
  font-family: 'Coda', sans-serif;
  word-spacing: 5px
}

.fa-pencil {
  cursor: pointer;
  color: #6aeeac;
  transition: color 0.3s ease;
}

.fa-pencil:hover {
  color: #00b257;
}

.edit-icon {
  margin-left: 10px;
  cursor: pointer;
  color: #6aeeac;
  font-size: 1.2rem;
  transition: color 0.3s ease;
  background: #2a2a2a;
  padding: 0.8rem 0.8rem;
  border-radius: 10px;
}

.edit-icon:hover {
  color: #00b257;
}


.comment-form button {
  align-self: flex-start;
  background: #00d26a;
  color: #000;
  padding: 0.6rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s;
  user-select: none;
}

.comment-form button:disabled {
  background: #4b804f;
  cursor: not-allowed;
}

.comment-form button:hover:not(:disabled) {
  background: #00b257;
}

/* Comment List */
.comment-list {
  display: flex;
  flex-direction: column;
  
}

/* Individual Comment */
.comment {
  background: #222;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 10px 0px;
}

/* Comment Header: Avatar + Name + Time */
.comment > div:first-child {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar {
  background: #00d26a;
  color: #000;
  font-weight: 700;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  user-select: none;
  flex-shrink: 0;
  text-transform: uppercase;
}

.name {
  font-weight: 700;
  color: #00d26a;
  font-size: 1.3rem;
  user-select: text;
}

.time {
  color: #adadad;
  font-size: 0.9rem;
  margin-left: auto;
  user-select: none;
  padding-left: 10px;
  font-family: "Acme", serif;
}

/* Comment Text */
.text {
  color: #ccc;
  font-size: 1.5rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Actions: Like, Dislike, Emoji, Reply */
.comment-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Like & Dislike Buttons */
.comment-actions button.like-btn,
.comment-actions button.dislike-btn {
  padding: 0.4rem 0.8rem;
  font-size: 1rem;
  border-radius: 6px;
  gap: 0.3rem;
  background: #333;
  border: none;
  color: #eee;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  transition: background-color 0.3s, color 0.3s;
}

/* Hover effect */
.comment-actions button.like-btn:hover,
.comment-actions button.dislike-btn:hover {
  background: #00d26a;
  color: #000;
}

/* Active state */
.comment-actions button.like-btn.active,
.comment-actions button.dislike-btn.active {
  background: #00d26a;
  color: #000;
}





/* Reply Button */
.comment-actions button.reply-btn {
  background: transparent;
  border: none;
  color: #00d26a;
  cursor: pointer;
  font-size: 1.5rem;
  user-select: none;
  transition: color 0.3s;
}

.comment-actions button.reply-btn:hover {
  color: #00b257;
}




.replies {
  margin-top: 1rem;
  padding-left: 1.5rem;
  border-left: 2px solid #444;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}


.reply {
  background: #2a2a2a;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  color: #ddd;
  position: relative;
  gap: 1px;
  margin: 10px 0px;
}


/* Reply Name and Time */
.reply .name {
  font-weight: 700;
  color: #00d26a;
  margin-bottom: 0.2rem;
  user-select: text;
  font-size: 1.5rem;
}

.reply .time {
  color: #bbbbbb;
  font-size: 0.9rem;
  position: absolute;
  right: 10px;
  top: 10px;
  user-select: none;
}

/* Reply Button for Replies */

.reply-form {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  padding-left: 1rem; 
}

.reply-form button.submit-reply {
  align-self: flex-start;
  background: #00d26a;
  color: #000;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.3s;
  font-size: 1rem;
  margin: 0;
}

.reply-form button.submit-reply:hover {
 background: #00d26a;
 color: #000;
}


.reply button {
  background: transparent;
  border: none;
  color: #00d26a;
  cursor: pointer;
  font-size: 1.3rem;
  margin: 25px 10px 10px;
  user-select: none;
  transition: color 0.3s;
}

.reply button:hover {
  color: #00b257;
}

.reply-form .reply-text {
  background: #333;
  border: none;
  color: #eee;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-size: 1rem;
  resize: vertical;
  min-height: 60px;
  margin: 0px 0px 15px;
}



/* Show Replies Button (with margin: 8px 0) */
.show-replies-btn {
  background: #00d26a;
  border: none;
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  user-select: none;
  transition: background 0.3s;
  display: block;
  width: fit-content;
  margin: 8px 0;
  font-size: 17px;
}

.show-replies-btn:hover {
  background: #00b257;
}


/* Show More Comments Button (with display: block; margin: 10px 0) */
.show-more-btn {
  background: #00d26a;
  border: none;
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  user-select: none;
  transition: background 0.3s;
  margin: 10px 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  display: block;
  font-size: 20px;
}

.more-replies-btn {
  background-color: #2a2a2a;
  color: #00d26a;
  border: 1px solid #00d26a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.3s, color 0.3s;
}

.more-replies-btn:hover {
  background-color: #00d26a;
  color: #000;
}
.mention {
  color: #00d26a;
  font-weight: bold;
  background-color: #333;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 10px;
  font-size: 1.3rem;
}




.blank-comment-info {
  color: #aaa;
  font-style: italic;
  text-align: center;
  margin: 1rem 0;
  font-size: 5vw;
}


  .clickable-publisher:hover {
    background-color: rgba(46, 204, 113, 0.1);
    transition: background 0.2s;
  }
  
  .clickable-series:hover {
    background-color: rgba(52, 152, 219, 0.1);
    transition: background 0.2s;
  }
  


/* Emoji Reactions Container */
.emoji-reactions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 20px;
  position: relative;
  bottom: 5px;
  color: #ccc;
  font-size: 1rem;
  flex-wrap: wrap;
  user-select: none;
}

.emoji-count {
  background: #333;
  padding: 0.25rem 0.6rem;
  border-radius: 9px;
  font-size: 0.85rem;
  color: #ccc;
  user-select: none;
}

.custom-emoji-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 5;
}

/* Selected emoji styling */
.selected-emoji {
  font-size: 1rem;
  padding: 6px 12px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e53);
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
}

.selected-emoji:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.selected-emoji::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}

.selected-emoji:active::before {
  width: 100px;
  height: 100px;
}

.emoji-options {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  background: rgb(29, 29, 29);
  padding: 8px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 100%;
  height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}

.custom-emoji-selector.active .emoji-options {
  display: flex;
}

.emoji-option {
  font-size: 1.2rem;
  padding: 5px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease;
  background: rgba(255, 255, 255, 0.15);
}

.emoji-option::after {
  content: attr(data-value);
  position: absolute;
  top: -30px; 
  left: 50%;
  transform: translateX(-0%);
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.2s ease, top 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
}

.emoji-option:hover::after {
  opacity: 1;
  top: -30px;
}

.emoji-reactions {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
  animation: pulse 2s infinite; 
}


/* Unique animations for each emoji */

.emoji-option[data-value="💖"]:hover {
  animation: heartbeat 0.5s ease;
  background: radial-gradient(circle, #ff69b4, transparent);
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.7);
}

.emoji-option[data-value="👍🏼"]:hover {
  animation: bounce 0.4s ease;
  background: linear-gradient(45deg, #4caf50, #8bc34a);
  transform: translateY(-4px);
  border: 1px solid #fff;
}

.emoji-option[data-value="👎🏼"]:hover {
  animation: shake 0.4s ease;
  background: linear-gradient(45deg, #f44336, #e91e63);
  transform: translateX(3px);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.6);
}

.emoji-option[data-value="🔥"]:hover {
  animation: glow 0.6s ease infinite;
  background: radial-gradient(circle, #ff4500, transparent);
  transform: scale(1.15);
  filter: brightness(1.2);
}

.emoji-option[data-value="💯"]:hover {
  animation: spin 0.5s ease;
  background: linear-gradient(45deg, #2196f3, #03a9f4);
  transform: rotate(360deg);
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.7);
}

.emoji-option[data-value="😂"]:hover {
  animation: laugh 0.4s ease;
  background: radial-gradient(circle, #ffeb3b, transparent);
  transform: rotate(-8deg);
  border: 2px solid #fff;
}

.emoji-option[data-value="😭"]:hover {
  animation: cry 0.4s ease;
  background: linear-gradient(45deg, #0288d1, #0277bd);
  transform: translateY(3px);
  box-shadow: 0 0 12px rgba(2, 136, 209, 0.6);
}
/* fbvsdvsdgvxzfgzgnjgjytjhcxxhj */
.emoji-option[data-value="🗿"]:hover {
  animation: stone 0.5s ease;
  background: radial-gradient(circle, #607d8b, transparent);
  transform: scale(1.1);
  filter: grayscale(0.3);
}

.emoji-option[data-value="💀"]:hover {
  animation: rattle 0.4s ease;
  background: linear-gradient(45deg, #424242, #212121);
  transform: translateX(-3px);
  box-shadow: 0 0 15px rgba(66, 66, 66, 0.8);
}

.emoji-option[data-value="🕹️"]:hover {
  animation: joystick 0.5s ease;
  background: radial-gradient(circle, #9c27b0, transparent);
  transform: rotate(10deg);
  border: 1px solid #fff;
}

.emoji-option[data-value="🎮"]:hover {
  animation: gamepad 0.4s ease;
  background: linear-gradient(45deg, #e91e63, #c2185b);
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(233, 30, 99, 0.7);
}

.emoji-option[data-value="😏"]:hover {
  animation: wink 0.4s ease;
  background: radial-gradient(circle, #4caf50, transparent);
  transform: rotate(7deg);
  filter: brightness(1.1);
}

.emoji-option[data-value="😍"]:hover {
  animation: love 0.5s ease;
  background: linear-gradient(45deg, #ff1744, #f50057);
  transform: scale(1.25);
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.6);
}

.emoji-option[data-value="😮"]:hover {
  animation: shock 0.4s ease;
  background: radial-gradient(circle, #00bcd4, transparent);
  transform: translateY(-4px);
  border: 2px solid #fff;
}

.emoji-option[data-value="😡"]:hover {
  animation: angry 0.4s ease;
  background: linear-gradient(45deg, #d32f2f, #b71c1c);
  transform: translateX(4px);
  box-shadow: 0 0 12px rgba(211, 47, 47, 0.7);
}

.emoji-option[data-value="🏆"]:hover {
  animation: trophy 0.5s ease;
  background: radial-gradient(circle, #0084ff, #d428ff);
  transform: scale(1.2);
  filter: brightness(1.3);
}

.emoji-option[data-value="🎯"]:hover {
  animation: bullseye 0.4s ease;
  background: linear-gradient(45deg, #f44336, #d81b60);
  transform: rotate(-10deg);
  box-shadow: 0 0 15px rgba(244, 67, 54, 0.6);
}

.emoji-option[data-value="🎉"]:hover {
  animation: party 0.5s ease;
  background: radial-gradient(circle, #ff9800, transparent);
  transform: rotate(12deg);
  border: 1px solid #fff;
}

.emoji-option[data-value="🤡"]:hover {
  animation: star 0.4s ease;
  background: linear-gradient(45deg, #b73bff, #fbc02d);
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(255, 235, 59, 0.7);
}

.emoji-option[data-value="😎"]:hover {
  animation: cool 0.4s ease;
  background: radial-gradient(circle, #2196f3, transparent);
  transform: translateY(-3px);
  filter: brightness(1.2);
}

.emoji-option[data-value="🤓"]:hover {
  animation: nerd 0.4s ease;
  background: linear-gradient(45deg, #4caf50, #388e3c);
  transform: rotate(5deg);
  border: 2px solid #fff;
}

.emoji-option[data-value="😴"]:hover {
  animation: sleep 0.4s ease;
  background: radial-gradient(circle, #b0bec5, transparent);
  transform: translateX(-3px);
  box-shadow: 0 0 10px rgba(176, 190, 197, 0.6);
}

.emoji-option[data-value="🤗"]:hover {
  animation: hug 0.5s ease;
  background: linear-gradient(45deg, #ff5722, #f4511e);
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(255, 87, 34, 0.7);
}

.emoji-option[data-value="🚀"]:hover {
  animation: rocket 0.5s ease;
  background: radial-gradient(circle, #4a90e2, transparent);
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(74, 144, 226, 0.7);
}

.emoji-option[data-value="🌟"]:hover {
  animation: sparkle 0.6s ease infinite;
  background: linear-gradient(45deg, #ffd9004b, #ffa60056);
  transform: scale(1.2);
  filter: brightness(1.3);
}

/* dsgzdsdgbvggeaghja */


.emoji-option[data-value="🦄"]:hover {
  animation: prance 0.5s ease;
  background: radial-gradient(circle, #ff69b4, #dda0dd);
  transform: rotate(10deg);
  box-shadow: 0 0 20px rgba(255, 105, 180, 0.6);
}

.emoji-option[data-value="⚔️"]:hover {
  animation: slash 0.4s ease;
  background: linear-gradient(45deg, #607d8b, #455a64);
  transform: translateX(4px);
  border: 1px solid #fff;
}

.emoji-option[data-value="🐺"]:hover {
  animation: howl 0.5s ease;
  background: radial-gradient(circle, #37474f, transparent);
  transform: scale(1.2);
  box-shadow: 0 0 15px rgba(55, 71, 79, 0.8);
}

.emoji-option[data-value="🦍"]:hover {
  animation: pound 0.4s ease;
  background: linear-gradient(45deg, #3e2723, #4e342e);
  transform: translateY(-4px);
  filter: brightness(1.1);
}

.emoji-option[data-value="🐉"]:hover {
  animation: dragon 0.5s ease;
  background: radial-gradient(circle, #d81b60, transparent);
  transform: rotate(-8deg);
  box-shadow: 0 0 18px rgba(216, 27, 96, 0.7);
}

.emoji-option[data-value="🦁"]:hover {
  animation: roar 0.4s ease;
  background: linear-gradient(45deg, #ffca28, #ffb300);
  transform: scale(1.15);
  border: 2px solid #fff;
}

.emoji-option[data-value="🦂"]:hover {
  animation: sting 0.4s ease;
  background: radial-gradient(circle, #8d6e63, transparent);
  transform: translateX(-3px);
  box-shadow: 0 0 12px rgba(141, 110, 99, 0.6);
}

.emoji-option[data-value="🐅"]:hover {
  animation: pounce 0.5s ease;
  background: linear-gradient(45deg, #ff5722, #e64a19);
  transform: translateY(-4px);
  filter: brightness(1.2);
}

/* Unique tooltip styling for each emoji */
.emoji-option[data-value="💖"]::after { content: "Love It!"; background: #ff69b4; font-weight: bold; z-index: 100; overflow :visible; }
.emoji-option[data-value="👍🏼"]::after { content: "Like It!"; background: #4caf50; border: 1px solid #fff; }
.emoji-option[data-value="👎🏼"]::after { content: " Dislike It"; background: #f44336; font-style: italic; }
.emoji-option[data-value="🔥"]::after { content: "On Fire!"; background: #ff4500; box-shadow: 0 0 10px #ff4500; }
.emoji-option[data-value="💯"]::after { content: " Right !"; background: #2196f3; transform: translateX(-50%) skew(-5deg); }
.emoji-option[data-value="😂"]::after { content: "Hilarious!"; background: #ffeb3b; color: #333; }
.emoji-option[data-value="😭"]::after { content: "So Sad!"; background: #0288d1; border-radius: 6px; }
.emoji-option[data-value="🗿"]::after { content: "Sigma Gamer!"; background: #607d8b; filter: grayscale(0.5); }
.emoji-option[data-value="💀"]::after { content: "Dangrous Gamer!"; background: #424242; box-shadow: 0 0 8px #fff; }
.emoji-option[data-value="🕹️"]::after { content: "Game On!"; background: #9c27b0; font-weight: bold; }
.emoji-option[data-value="🎮"]::after { content: "Pro Gamer!"; background: #e91e63; transform: translateX(-50%) skew(5deg); }
.emoji-option[data-value="😏"]::after { content: "Sneaky!"; background: #4caf50; border: 1px solid #fff; }
.emoji-option[data-value="😍"]::after { content: "Heart Eyes!"; background: #ff1744; box-shadow: 0 0 10px #ff1744; }
.emoji-option[data-value="😮"]::after { content: "ShockaLad!"; background: #00bcd4; font-style: italic; }
.emoji-option[data-value="😡"]::after { content: "Furious!"; background: #d32f2f; font-weight: bold; }
.emoji-option[data-value="🏆"]::after { content: "Winner!"; background: #4d5292; color: #fafafa; }
.emoji-option[data-value="🎯"]::after { content: "Bullseye!"; background: #f44336; border-radius: 6px; }
.emoji-option[data-value="🎉"]::after { content: "Party Time!"; background: #ff9800; transform: translateX(-50%) skew(-10deg); }
.emoji-option[data-value="🤡"]::after { content: "Joker!"; background: #44033f; box-shadow: 0 0 8px #2d3bfb; }
.emoji-option[data-value="😎"]::after { content: "Too Cool!"; background: #2196f3; font-style: italic; }
.emoji-option[data-value="🤓"]::after { content: "Brainiac!"; background: #4caf50; border: 1px solid #fff; }
.emoji-option[data-value="😴"]::after { content: "Snooze!"; background: #b0bec5; filter: grayscale(0.3); }
.emoji-option[data-value="🤗"]::after { content: "Big Hug!"; background: #ff5722; font-weight: bold; }
.emoji-option[data-value="🚀"]::after { content: "Blast Off!"; background: #4a90e2; border-radius: 6px; }
.emoji-option[data-value="🌟"]::after { content: "Shine Bright!"; background: #6d5f0f; color: #faf8f8; }
.emoji-option[data-value="🦄"]::after { content: "Magic Vibes!"; background: #ff69b4; box-shadow: 0 0 10px #ff69b4; }
.emoji-option[data-value="⚔️"]::after { content: "Sword Clash!"; background: #607d8b; transform: translateX(-50%) skew(5deg); }
.emoji-option[data-value="🐺"]::after { content: "Lone Wolf!"; background: #37474f; font-weight: bold; }
.emoji-option[data-value="🦍"]::after { content: "Gorilla Power!"; background: #3e2723; box-shadow: 0 0 8px #4e342e; }
.emoji-option[data-value="🐉"]::after { content: "Dragon Fury!"; background: #d81b60; border: 1px solid #fff; }
.emoji-option[data-value="🦁"]::after { content: "King Roar!"; background: #ffca28; color: #333; }
.emoji-option[data-value="🦂"]::after { content: "Scorpion Strike!"; background: #8d6e63; font-style: italic; }
.emoji-option[data-value="🐅"]::after { content: "Tiger Prowl!"; background: #ff5722; box-shadow: 0 0 10px #e64a19; }

/* Keyframe animations for unique effects */
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 8px #ff4500; } 50% { box-shadow: 0 0 16px #ff4500; } }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes laugh { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@keyframes cry { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes stone { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes rattle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes joystick { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(15deg); } }
@keyframes gamepad { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes wink { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
@keyframes love { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes shock { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes angry { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes trophy { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes bullseye { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes party { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(15deg); } }
@keyframes star { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes cool { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes nerd { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes sleep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes hug { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes rocket { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sparkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
@keyframes prance { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(15deg); } }
@keyframes slash { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes howl { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes pound { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dragon { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@keyframes roar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes sting { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes pounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }


.emoji-option:active {
  animation: pulse-click 0.3s ease;
  
}


@keyframes pulse-click {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}




/* make game page responsive for everydevice start from here  */


@media screen and (max-width: 569px){

.game-container {
    max-width: 100%;
    margin: auto;
    padding: 10px 10px 20px 35px;
  }
 
  .game-header {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
  }
   
  .game-Image{
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 175px;
   position: relative;
   top: -25px;
   text-align: center;
   border: 2px solid #ffffff22;
   border-radius: 10px;
   background-color: #1e1e1e;
   box-shadow: 0 4px 10px rgba(0,0,0,0.4);
   transition: transform 0.3s, box-shadow 0.3s;
  }
   
  .game-header img {
   width: 100%;
   aspect-ratio: 3/4;
   object-fit: cover;
   border-radius: 10px;
   border: 1px solid #333;
   transition: transform 0.2s
  }
  .game-name55{
    width: 159px;
  }
  .game-info h1 {
    width: 150px;

    font-size: 2rem;
  }

 .clickable-publisher-top {
  width: 150px;
  font-size: 1.2rem;
  cursor: pointer;
  color: #2ecc71;
 }



.game-meta {
  width: 200px;
  gap: 5px;
}

.meta-item {
  padding: 0.4rem 0.25rem;
  border-radius: 10px;
  font-size: 0.9rem;
}


.like-dislike-box {
  width: 150px;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.like-dislike-box button {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  gap: 5px;
}




.game-rating {
  background-color: #2a2a2a;
  /* color: #fff; */
  border-radius: 10px;
  border: 1px solid #444;
  padding: 0.2rem 1rem;
  width: 200% ;
  position: relative;
  top: 30px;
  right: 150px;
  display: block; 
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: #777;
  user-select: none;
  white-space: nowrap; 
}

.game-rating .star,
#rating-value,
#rating-count {
  display: inline-block; 
  vertical-align: middle;
  margin-right: 0.3rem; 
}

#rating-value,
#rating-count {
  position: relative;
  top: 2px;
}

#rating-value {
  font-size: 1.3rem;
  color: #ccc;
}

#rating-count {
  font-size: 1rem; 
  color: #aaa; 
}

.game-rating .star.hover,
.game-rating .star.active {
  color: gold;
}




.far.fa-star, 
.fas.fa-star { 
  background: none !important;
  color: #ffd700;
}

.far.fa-star:hover, 
.fas.fa-star:hover { 
  transform: scale(1.2); 
  text-shadow: 0 0 5px #0ff, 0 0 7px #0ff, 0 0 1px #0ff;
}

.remove-btn {
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}


/* Star colors by mode */
.game-rating .average-rated {
  color: gold;
}

.game-rating .user-rated {
  color: #ffd700;
  text-shadow: 0 0 6px #00ffe1;
}

.game-rating .preview-rated {
  color: #ccc;
}
}



@media screen and (max-width: 469px){

.game-container {
    max-width: 100%;
    margin: auto;
    padding: 10px 10px 20px 15px;
  }
 
  .game-header {
    gap: 40px;
  }
   
  .game-Image{
   width: 165px;
   top: -25px;
  }
   
  .game-name55{
    width: 159px;
  }

 .game-info h1 {
   width: 150px;
   font-size: 1.8rem;
  }

 .clickable-publisher-top {
   width: 150px;
   font-size: 1.2rem;
 }

 .game-meta {
   width: 200px;
   gap: 5px;
 }
 
 .meta-item {
   padding: 0.4rem 0.25rem;
   border-radius: 10px;
   font-size: 0.9rem;
 }
 
 
 .like-dislike-box {
   width: 150px;
   gap: 1rem;
 }
 
 .like-dislike-box button {
   padding: 0.5rem 1rem;
   font-size: 1rem;
   gap: 5px;
 }
 
 .game-rating {
   padding: 0.2rem 1rem;
   width: 200% ;
   top: 30px;
   right: 150px;
   margin-top: 10px;
   margin-bottom: 20px;
   font-size: 1.5rem;
 }
 
 .game-rating .star,
 #rating-value,
 #rating-count {
   margin-right: 0.3rem; 
 }
 
 #rating-value,
 #rating-count {
   top: 2px;
 }
 
 #rating-value {
   font-size: 1.3rem;
 }
 
 #rating-count {
   font-size: 1rem; 
 }

}

@media screen and (max-width: 450px){
    .game-header {
    gap: 20px;
    }
}
@media screen and (max-width: 400px){
  
.game-container {
    max-width: 100%;
    margin: 0px;
    padding: 3px 10px 20px 15px;
  }

  .Fav-box-2 {
  width: 100%;
  position: relative;
  right: 70px;
  top: 30px;
  display: inline;
  gap: 1rem;
  align-items: center;
}

.Fav-box-2 button {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  padding: 0.5rem 0.2rem;
  border-radius: 8px;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  gap: 5px;
}
.game-meta {
  display: flex;
  gap: 5px;
  width: 150px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.meta-item {
  background: #1f1f1f;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

 .game-header {
    gap: 20px;
  }

  .game-Image{
   width: 136px;
   top: -50px;
  }

  .game-name55{
    width: 159px;
    margin-top: 5px;
  }

  .game-info h1 {
    width: 150px;
    font-size: 1.8rem;
  }

 .clickable-publisher-top {
    width: 150px;
  font-size: 1.2rem;
  }

 .like-dislike-box {
  width: 150px;
  margin-top: 5px;
 }

.like-dislike-box button {
  font-size: 1rem;
}

.game-rating {
  top: 30px;
  right: 150px;
  font-size: 1.5rem;
  margin-top: 10px;
  margin-bottom: 5px;
}

#rating-value {
  font-size: 1.3rem;
}

#rating-count {
  font-size: 1rem; 
} 

}

@media screen and (max-width: 370px){
  .reply .name {
  margin-bottom: 2.2rem;
  font-size: 1.6rem;
}

.reply .time {
  font-size: 1.1rem;
  right: 10px;
  top: 50px;
}
}

@media screen and (max-width: 350px){

.game-container {
    max-width: 100%;
    margin: 0px;
    padding: 3px 10px 20px 15px;
  }

  .Fav-box-2 {
  width: 200%;
  position: relative;
  right: 20px;
  top: 50px;
  display: inline;
  gap: 1rem;
  align-items: center;
}

.Fav-box-2 button {
  background-color: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  gap: 5px;
  transform: scale(1.5);

}
.game-meta {
  display: flex;
  gap: 5px;
  width: 200px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.meta-item {
  background: #1f1f1f;
  padding: 0.2rem 01.2rem;
  border-radius: 10px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

 .game-header {
    gap: 10px;
  }

  .game-Image{
   width: 130px;
   top: -50px;
  }

  .game-name55{
    width: 125px;
    margin-top: 5px;
  }

  .game-info h1 {
   position: relative; 
   top: 10px;
   width: 150px;
   font-size: 1.6rem;
  }

 .clickable-publisher-top {
  margin-top: 8px;
    width: 150px;
  font-size: 1rem;
  }

  .like-dislike-box {
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 200px;
  width: 150px;
  margin-top: 5px;
  white-space: nowrap;
}

.like-dislike-box button {
  margin-bottom: 8px;
  font-size: 1.3rem;
}

.game-rating {
  top: 90px;
  right: 150px;
  font-size: 1.3rem;
  margin-top: 10px;
  margin-bottom: 50px;
  width: 228%;
}

#rating-value {
  font-size: 1.2rem;
}

#rating-count {
  font-size: 1rem; 
} 
  
.details-container {
  margin-top: 2.5rem;
  gap: 2rem;
}

.details-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}

.detail {
  padding: 1rem 0.2rem;
  font-size: 0.78rem;
}

}

@media screen and (max-width: 325px){ 
 .game-info h1 {
  font-size: 1.4rem;
  }

  .comment-actions {
  gap: 0.5rem;
  margin: 0.5rem 0px;
 }


 }

@media screen and (max-width: 299px){
  .game-container {
    max-width: 100%;
    margin: 0px;
    padding: 3px 10px 20px 15px;
  }
  
  .Fav-box-2 {
  width: 20px;
  right: -120px;
  top: 35px;
  gap: 1rem;
 }

 .Fav-box-2 button {
  width: 80px;
  font-size: 1rem;
  gap: 5px;
  transform: scale(1.5);
 }

 .game-meta {
  display: flex;
  width: 220px;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: 5vw;
  margin-top: 1rem;
  transform: scale(1.2);
 }
 
 .meta-item {
  background: #1f1f1f;
  padding: 0.4rem 0.1rem;
  border-radius: 10px;
  font-size: 5.8vw;
  display: flex;
  align-items: center;
}

.game-header {
  gap: 10px;
  }

  .game-Image{
  width: 80vw;
  top: 0px;
  }
  
 .game-name55{
  width: 125px;
  margin-top: 5px;
  }

 .game-info h1 {
  white-space: nowrap;
  font-size: 13.8vw;
  }
  
 .clickable-publisher-top {
   width: 150px;
  font-size: 7.7vw;
  margin-top: 0.8rem;
  }
  

  .like-dislike-box {
    left: 0px;
    top: 168vw;
  width: 150px;
  margin-top: 5px;
}

.like-dislike-box button {
  margin-bottom: 8px;
  font-size: 1.3rem;
}


.game-rating {
  top: 75px;
  right: 4vw;
  font-size: 1rem;
  margin-top: 10px;
  margin-bottom: 50px;
  width: 220%;
}

#rating-value {
 font-size: 1rem;
}

#rating-count {
  font-size: 0.9rem; 
 } 

.details-container {
  margin-top: 2.5rem;
  gap: 2rem;
}

.details-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.detail {
  padding: 1rem 1rem;
  font-size: 1.1rem;
}

.video-trailer, .media-item:not(.video-trailer) {
  height: 52vw;
}

 .container {
  gap: 5px;
  margin: 0px 5px;
 }
      
 .icon {
  width: 160px;
  height: 50px;
 }
    
 .icon .hover-text {
  bottom: 0px;
  font-size: 10px;
  padding: 3px 10px;
 }

 .instagram i {
  font-size: 35px;
 } 

 .x i {
  font-size: 35px;
 }

 .discord i {
  font-size: 35px;
 }

 .join-us, .more-games {
   font-size: 1.8rem;
 }
 .join-us span::after {
   bottom: 15px;
 }
 .join-us::before {
   bottom: 15px;
 }


 
 #comment-name {
   padding: 0.8rem;
   border-radius: 8px;
   font-size: 1rem;
   width: 70vw;
 }

 .edit-icon {
   margin-left: 0px;
   font-size: 1.2rem;
   padding: 0.8rem 0.8rem;
   border-radius: 10px;
 }
 
  .comment-form button {
   padding: 0.6rem 1.5rem;
   border-radius: 8px;
   font-size: 1rem;
 }


 
/* Reply Button for Replies */

.replies {
  margin-top: 0.8rem;
  padding-left: 0.5rem;
  border-left: 2px solid #444;
}


.reply {
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  gap: 1px;
  margin: 10px 0px;
}

.reply .name {
  margin-bottom: 2.2rem;
  font-size: 1.5rem;
}

.reply .time {
  font-size: 1rem;
  right: 10px;
  top: 50px;
}


.reply-form {
  padding-left: 0rem; 
}

.reply-form button.submit-reply {
  padding: 0.4rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
}


.reply button {
  font-size: 1.3rem;
  margin: 25px 10px 10px;
}


.reply-form .reply-text {
  background: #333;
  border: none;
  color: #eee;
  border-radius: 6px;
  padding: 0.5rem 0.8rem;
  font-size: 1rem;
  resize: vertical;
  min-height: 40px;
}


.show-replies-btn {
  background: #00d26a;
  border: none;
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  user-select: none;
  transition: background 0.3s;
  display: block;
  width: fit-content;
  margin: 8px 0;
  font-size: 17px;
}

.show-replies-btn:hover {
  background: #00b257;
}



.show-more-btn {
  background: #00d26a;
  border: none;
  border-radius: 8px;
  color: #000;
  cursor: pointer;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  user-select: none;
  transition: background 0.3s;
  margin: 10px 0;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  display: block;
  font-size: 20px;
}

.more-replies-btn {
  background-color: #2a2a2a;
  color: #00d26a;
  border: 1px solid #00d26a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 15px;
  transition: background 0.3s, color 0.3s;
}

.more-replies-btn:hover {
  background-color: #00d26a;
  color: #000;
}
.mention {
  color: #00d26a;
  font-weight: bold;
  background-color: #333;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 10px;
  font-size: 1.3rem;
}


/* Emoji Reactions Container */
.emoji-reactions {
  gap: 0.5rem;
  padding-left: 20px;
  bottom: 5px;
  font-size: 1rem;
}

.emoji-count {
  padding: 0.25rem 0.6rem;
  border-radius: 9px;
  font-size: 0.85rem;
}

.custom-emoji-selector {
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.selected-emoji {
  font-size: 1rem;
  padding: 6px 12px;
  border-radius: 10px;
  gap: 6px;
}

.selected-emoji:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


.emoji-options {
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  top: 100%;
  height: 200px;
}


.emoji-option {
  font-size: 1.2rem;
  padding: 5px;
  border-radius: 8px;
}

.emoji-option::after {
  top: -25px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.emoji-option:hover::after {
  opacity: 1;
  top: -30px;
}

.emoji-reactions {
  margin-top: 8px;
  font-size: 0.9rem;
}

}

@media screen and (min-width: 451px){

 .details-container {
  margin-top: 2rem;
  gap: 2rem;
 }

 .details-grid {
  grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
  gap: 1rem;
  padding: 0px 12px;
 }

 .detail {
  margin: 5px 0px;
  padding: 1rem 0.5rem;
  font-size: 1rem;
 }
  
  .container {
   gap: 13px;
   margin: 0px 15px;
  }
      
  .icon {
   width: 160px;
   height: 70px;
  }
    
  .icon .hover-text {
   bottom: 0px;
   font-size: 13px;
   padding: 3px 10px;
  }

  .instagram i, .x i, .discord i {
   font-size: 45px;
  } 
 .discord:hover {
 background-size: 23.5vw 20vw ,100% 10%;
 }

 .blank-comment-info {
  margin: 1rem 0;
  font-size: 22px;
}
}

@media screen and (min-width: 500px){
 .discord:hover {
 background-size: 23.5vw 18vw ,100% 10%;
 }
}

@media screen and (min-width: 570px){
 .detail {
   padding: 1rem 1rem;
   font-size: 3vw;
 }

  .download-btn {
   width: 250px;
   height: 80px;
   font-weight: 700;
 }

 .icon48 {
   width: 80px ;
   height: 55px ;
   left: -18%;
 }

 .text48 {
   left: 25px;
   font-size: 25px;
 }
 
 .genre-section {
   padding: 1.2rem;
   border-radius: 15px;
   box-shadow: 0px 10px 8px rgba(0,0,0,0.3);
   margin: 0px 20px;
 }
 
 .genre-section h3 {
   font-size: 1.5rem;
 }
 
 .tag {
   font-size: 1.2rem;
 }
 
 .about-game-section {
   box-shadow: 0px 10px 8px rgba(0,0,0,0.3);
   margin: 20px 20px;
 }
 
 .about-game-section h2 {
   font-size: 1.6rem;
 }
 
 .about-game-section p {
   font-size: 1.2rem;
 }

 
 .media-showcase {
  margin: 30px 20px;
 }
 
 .media-scroll {
  gap: 1.5rem;
 }
 
 .media-item {
  border-radius: 15px;
 }

 .video-trailer, .media-item:not(.video-trailer) {
  height: 40vw;
 }
 .discord:hover {
 background-size: 130px 100px ,100% 10%;
 }

 .join-us, .more-games {
   font-size: 2.5rem;
 }
 .join-us span::after {
   bottom: 18px;
 }
 .join-us::before {
   bottom: 15px;
 }

.comment-section {
  padding: 2rem 20px;
  margin: 3rem 15px;
  border-radius: 15px;
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

 .comment-section h2 {
   font-size: 1.8rem;
   margin-bottom: 0.8rem;
 }

 .comment-form input,
 .comment-form textarea {
   border-radius: 8px;
   padding: 0.8rem 1rem;
   font-size: 1.5rem;
 }

 .comment-form input {
   min-height: 40px;
 }

 .comment-form textarea {
   min-height: 100px;
 }
 
 #comment-name {
   padding: 0.7rem 20px;
   border-radius: 8px;
   font-size: 1.2rem;
 }

 .edit-icon {
   margin-left: 0px;
   font-size: 1.2rem;
   padding: 0.8rem 0.8rem;
   border-radius: 15px;
 }
 
  .comment-form button {
   padding: 0.5rem 1.5rem;
   border-radius: 8px;
   font-size: 1.3rem;
  }

  .comment {
  border-radius: 10px;
  padding: 2rem 20px;
  gap: 1rem;
}

.comment > div:first-child {
  gap: 1rem;
 }
 
 .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.5rem;
 }

 .name {
  font-size: 1.3rem;
 }

 .time {
   font-size: 1rem;
  padding-left: 20px;
  word-spacing: 5px;
 }

 .text {
  font-size: 1.3rem;
  line-height: 1.4;
 }

 .comment-actions {
  gap: 1rem;
  margin: 0.2rem 0px;
 }

  .comment-actions button.like-btn,
  .comment-actions button.dislike-btn {
  padding: 0.5rem 1.3rem;
  font-size: 1.3rem;
  border-radius: 6px;
  gap: 0.3rem;
 }

 .comment-actions button.reply-btn {
  font-size: 1.8rem;
  padding-left: 20px;
 }

 /* Reply Button for Replies */

.replies {
  margin-top: 1rem;
  padding-left: 1.5rem;
  border-left: 2px solid #444;
  gap: 2rem;
}


.reply {
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  margin: 15px 0px;
}



.reply .name {
  margin-bottom: 0.8rem;
  font-size: 1.8rem;
}

.reply .time {
  font-size: 1rem;
  right: 10px;
  top: 10px;
}


.reply-form {
  padding-left: 1rem;
}

.reply-form button.submit-reply {
  padding: 0.3rem 1rem;
  border-radius: 10px;
  font-size: 1.2rem;

}

.reply button {
  font-size: 1.5rem;
  margin: 25px 10px 10px;
}

.reply-form .reply-text {
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font-size: 1.3rem;
  min-height: 80px;
  margin: 0px 0px 20px;
}

.show-more-btn {
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  margin: 10px auto 0 auto;
  font-size: 22px;
}

.show-replies-btn {
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  margin: 8px 0;
  font-size: 20px;
}

.more-replies-btn {
  border: 1.5px solid #00d26a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 1rem;
}


.mention {
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 10px;
  font-size: 1.3rem;
}


/* Emoji Reactions Container */
.emoji-reactions {
  gap: 0.6rem;
  padding-left: 20px;
  bottom: 5px;
  margin-top: 8px;
}

.emoji-count {
  padding: 0.25rem 0.6rem;
  border-radius: 9px;
  font-size: 1rem;
}

.custom-emoji-selector {
  border-radius: 12px;
  padding: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.selected-emoji {
  font-size: 1rem;
  padding: 6px 12px;
  border-radius: 10px;
}

.emoji-options {
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
  height: fit-content;
  overflow: visible;
}


.emoji-option {
  font-size: 1.2rem;
  padding: 5px;
  border-radius: 8px;
}

.emoji-option::after {
  top: -25px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.emoji-option:hover::after {
  top: -30px;
}


}

@media screen and (min-width: 700px){
  .container {
   gap: 30px;
   margin: 0px 0px;
  }
      
  .icon {
   width: 180px;
   height: 90px;
  }
    
  .icon .hover-text {
   bottom: 0px;
   font-size: 18px;
   padding: 3px 10px;
  }

  .instagram i, .x i, .discord i {
   font-size: 60px;
  }
 .discord:hover {
 background-size: 145px 120px ,100% 10%;
 }
}
@media screen and (min-width: 800px){

  .game-container {
   padding: 15px 0px 5px 30px;
  }
   
  .game-header {
   gap: 4.7vw;
  } 
   
  .game-Image{
   width: 250px;
  }
     
  .game-info h1 {
   font-size: 2rem;
   margin: 0 0 0rem 0;
   letter-spacing: 2px;
  }
   
  .clickable-publisher-top {
   font-size: 1.5rem;
  }
   
  .game-meta {
   gap: 10px;
   margin-top: 14px;
  }
   
  .meta-item {
   padding: 0.2rem 0.3rem;
   font-size: 1.5rem;
  }
   
  .like-dislike-box {
   margin-top: 14px;
   gap: 1.5rem;
  }
   
  .like-dislike-box button {
   padding: 0.5rem 1rem;
   font-size: 1.5rem;
   gap: 5px;
  }
   
  .Fav-box-2 {
   margin-top: 14px;
   gap: 1rem;
  }
   
  .Fav-box-2 button {
   padding: 0.5rem 1rem;
   font-size: 1.5rem;
   gap: 5px;
  }

  .favorite-2 .fa-star {
  font-size: 2rem;
  padding: 0rem 0.5rem;
  }
    
  .game-rating {
   padding: 0rem 0.8rem;
   margin-top: 14px;
   font-size: 2rem;
   gap: 0.5rem;
  }
   
  .game-rating .star {
   font-size: 2.5rem;
   top: -3px;
   position: relative;
  }
   
  .game-rating .star,
   #rating-value,
   #rating-count {
   margin-right: 0.3rem; 
  }
   
  #rating-value,
   #rating-count {
   top: 2px;
  }
   
  #rating-value {
   font-size: 1.5rem;
  }
   
  #rating-count {
   font-size: 1.2rem; 
   margin-left: 1px;
  }

  .details-container {
   margin-top: 2rem;
   gap: 2rem;
 }

  .details-grid {
   grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
   gap: 1rem;
   padding: 10px 20px;
  }

  .detail {
   margin: 2px 0px;
   padding: 1.5rem 2rem;
   font-size: 3.3vw;
  }
  .download-btn {
   width: 340px;
   height: 100px;
   font-weight: 700;
  }
  .icon48 {
    width: 100px ;
    height: 80px ;
    left: -15.5%;
  }
  .text48 {
    left: 40px;
    font-size: 32px;
  }

  .genre-section {
   padding: 1.2rem;
   border-radius: 15px;
   box-shadow: 10px 10px 8px rgba(0,0,0,0.3);
   margin: 0px 20px;
  }
 
 .genre-section h3 {
   border-left: 8px solid #00d26a;
   padding-left: 1rem;
   font-size: 2rem;
  }
 
 .tag {
   font-size: 1.6rem;
  }
 
 .about-game-section {
   box-shadow: 0px 10px 8px rgba(0,0,0,0.3);
   margin: 30px 20px;
  }
 
 .about-game-section h2 {
   border-left: 8px solid #00d26a;
   padding-left: 1rem;
   font-size: 2rem;
  }
 
 .about-game-section p {
   font-size: 1.8rem;
  }
  .genre-tags {
  gap: 1rem;
 }

 .join-us, .more-games {
   font-size: 3rem;
 }
 .join-us span::after {
   bottom: 22px;
 }
 .join-us::before {
   bottom: 15px;
 }

 .comment-section {
  padding: 2rem 30px;
  margin: 3rem 20px;
  border-radius: 15px;
 }

 .comment-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
 }

 .comment-section h2 {
   font-size: 3rem;
   margin-bottom: 0.8rem;
 }

 .comment-form input,
 .comment-form textarea {
   border-radius: 8px;
   padding: 0.8rem 1rem;
   font-size: 2.5rem;
 }

 .comment-form input {
   min-height: 50px;
 }

 .comment-form textarea {
   min-height: 180px;
 }
 
 #comment-name {
   padding: 0.7rem 20px;
   border-radius: 8px;
   font-size: 2.5rem;
   word-spacing: 8px
 }

 .edit-icon {
   margin-left: 30px;
   font-size: 2.8rem;
   padding: 0.8rem 0.8rem;
   border-radius: 10px;
 }
 
  .comment-form button {
   padding: 0.5rem 2rem;
   border-radius: 8px;
   font-size: 2rem;
   margin: 10px 20px 30px;
 }

  .comment {
  border-radius: 15px;
  padding: 2rem 20px;
  gap: 1rem;
 }

 .avatar {
  width: 50px;
  height: 50px;
  font-size: 2rem;
 }

 .name {
  font-size: 1.7rem;
 }

 .time {
  font-size: 1.3rem;
  padding-left: 25px;
  word-spacing: 8px;
 }

 .text {
  font-size: 1.8rem;
 }

  .comment-actions {
  gap: 1.5rem;
  margin: 0.2rem 0px;
 }

  .comment-actions button.like-btn,
  .comment-actions button.dislike-btn {
  padding: 0.5rem 1.5rem;
  font-size: 1.8rem;
  border-radius: 6px;
  gap: 0.3rem;
 }

 .comment-actions button.reply-btn {
  font-size: 2.3rem;
  padding-left: 20px;
 }

  /* Reply Button for Replies */

.replies {
  margin-top: 1rem;
  padding-left: 1.5rem;
  border-left: 4px solid #444;
  gap: 2rem;
}


.reply {
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 1.2rem;
  margin: 15px 0px;
}



.reply .name {
  margin-bottom: 0.2rem;
  font-size: 2.2rem;
}

.reply .time {
  font-size: 1.5rem;
  right: 10px;
  top: 10px;
}


.reply-form {
  padding-left: 1.5rem;
}

.reply-form button.submit-reply {
  padding: 0.3rem 1rem;
  border-radius: 10px;
  font-size: 1.8rem;

}

.reply button {
  font-size: 1.8rem;
  margin: 25px 10px 10px;
}

.reply-form .reply-text {
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font-size: 1.8rem;
  min-height: 140px;
  margin: 0px 0px 20px;
}

.show-more-btn {
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  margin: 10px auto 0 auto;
  font-size: 28px;
}

.show-replies-btn {
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  margin: 8px 0;
  font-size: 25px;
}

.more-replies-btn {
  border: 1.5px solid #00d26a;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 1.5rem;
}


.mention {
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 10px;
  font-size: 1.8rem;
}

/* Emoji Reactions Container */
.emoji-reactions {
  gap: 0.7rem;
  padding-left: 20px;
  bottom: 0px;
  margin-top: 0px;
}

.emoji-count {
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 1.3rem;
}

.custom-emoji-selector {
  border-radius: 12px;
  padding: 10px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
}

.selected-emoji {
  font-size: 1.5rem;
  padding: 6px 12px;
  border-radius: 13px;
}

.emoji-options {
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
}


.emoji-option {
  font-size: 1.8rem;
  padding: 4px;
  border-radius: 8px;
}

.emoji-option::after {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 1.2rem;
}

.emoji-option:hover::after {
  top: -40px;
}

.blank-comment-info {
  margin: 1rem 0;
  font-size: 28px;
}

}

@media screen and (min-width: 1024px){

  .game-container {
   padding: 30px 0px 5px 30px;
  }
   
  .game-header {
   gap: 4vw;
  } 
   
  .game-Image{
   width: 330px;
  }
     
  .game-info h1 {
   font-size: 2.5rem;
   margin: 0 0 0rem 0;
   letter-spacing: 2px;
  }
   
  .clickable-publisher-top {
   font-size: 2rem;
  }
   
  .game-meta {
   gap: 10px;
   margin-top: 18px;
  }
   
  .meta-item {
   padding: 0.5rem 1rem;
   font-size: 1.6rem;
  }
   
  .like-dislike-box {
   margin-top: 20px;
   gap: 2rem;
  }
   
  .like-dislike-box button {
   padding: 0.5rem 1rem;
   font-size: 2.5rem;
   gap: 5px;
  }
   
  .Fav-box-2 {
   margin-top: 20px;
   gap: 1rem;
  }
   
  .Fav-box-2 button {
   padding: 0.5rem 1rem;
   font-size: 2.5rem;
   gap: 5px;
  }

  .favorite-2 .fa-star {
  font-size: 3rem;
  padding: 0rem 0.5rem;
  }
    
  .game-rating {
   padding: 0.1rem 0.5rem;
   margin-top: 20px;
   font-size: 2rem;
   gap: 0.5rem;
  }
   
  .game-rating .star {
   font-size: 3rem;
   top: -3px;
   position: relative;
  }
   
  .game-rating .star,
   #rating-value,
   #rating-count {
   margin-right: 0.3rem; 
  }
   
  #rating-value,
   #rating-count {
   top: 2px;
  }
   
  #rating-value {
   font-size: 2rem;
  }
   
  #rating-count {
   font-size: 1.7rem; 
   margin-left: 1px;
  }

  .details-container {
   margin-top: 2rem;
   gap: 2rem;
 }

  .details-grid {
   grid-template-columns: repeat(auto-fit, minmax(40vw, 1fr));
   gap: 1.5rem;
   padding: 10px 20px;
  }

  .detail {
   margin: 2px 0px;
   padding: 1.5rem 2rem;
   font-size: 3.3vw;
  }

 .download-section {
   margin: 30px 20px 50px 0px;
 }
  .download-btn {
   width: 400px;
   height: 120px;
   font-weight: 700;
  }
  .icon48 {
    width: 120px ;
    height: 90px ;
    left: -15.5%;
  }
  .text48 {
    left: 50px;
    font-size: 40px;
  }

  .genre-section {
   padding: 2rem;
   border-radius: 15px;
   box-shadow: 10px 10px 8px rgba(0,0,0,0.3);
   margin: 0px 20px;
  }
 
 .genre-section h3 {
   border-left: 8px solid #00d26a;
   padding-left: 1rem;
   font-size: 3rem;
  }
 
 .tag {
   font-size: 2rem;
  }
 
 .about-game-section {
   box-shadow: 0px 10px 8px rgba(0,0,0,0.3);
   margin: 30px 20px;
  }
 
 .about-game-section h2 {
   border-left: 8px solid #00d26a;
   padding-left: 1rem;
   font-size: 3rem;
  }
 
 .about-game-section p {
   font-size: 2.2rem;
  }
  .genre-tags {
  gap: 1rem;
 }

 .media-scroll {
  gap: 2rem;
 }
 
 .media-item {
  border-radius: 20px;
 }
 
 .video-trailer, .media-item:not(.video-trailer) {
  height: 27vw;
 }

   .container {
   gap: 40px;
   margin: 0px 0px;
  }
      
  .icon {
   width: 200px;
   height: 110px;
  }
    
  .icon .hover-text {
   bottom: 0px;
   font-size: 23px;
   padding: 3px 10px;
  }

  .instagram i, .x i, .discord i {
   font-size: 80px;
  }
  .discord:hover {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 15 100 100"><rect x="20" y="20" width="60" height="60" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="10"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.2s" repeatCount="indefinite" /></rect></svg>'), #4b56d2;
   background-size: 200px 160px , contain;
  }
  
 .join-us, .more-games {
   font-size: 4rem;
 }
 .join-us span::after {
   bottom: 22px;
   height: 5px;
 }
 .join-us::before {
   bottom: 15px;
   height: 5px;
 }
 .join-us:hover::before {
    width: 60%;
 }

.comment-section {
  padding: 2rem 30px;
  margin: 3rem 20px;
  border-radius: 15px;
 }

 .comment-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
 }

 .comment-section h2 {
   font-size: 3rem;
   margin-bottom: 0.8rem;
 }

 .comment-form input,
 .comment-form textarea {
   border-radius: 8px;
   padding: 0.8rem 1rem;
   font-size: 2.5rem;
 }

 .comment-form input {
   min-height: 50px;
 }

 .comment-form textarea {
   min-height: 180px;
 }
 
 #comment-name {
   padding: 0.7rem 20px;
   border-radius: 8px;
   font-size: 2.5rem;
   word-spacing: 8px
 }

 .edit-icon {
   margin-left: 30px;
   font-size: 2.8rem;
   padding: 0.8rem 0.8rem;
   border-radius: 10px;
 }
 
  .comment-form button {
   padding: 0.5rem 2rem;
   border-radius: 8px;
   font-size: 2rem;
   margin: 10px 20px 30px;
 }

 .comment {
  border-radius: 25px;
  padding: 2rem 20px;
  gap: 1rem;
 }

 .avatar {
  width: 75px;
  height: 75px;
  font-size: 3rem;
 }

 .name {
  font-size: 2.5rem;
  padding-left: 5px;
 }

 .time {
  font-size: 1.8rem;
  padding-left: 25px;
  word-spacing: 8px;
 }

 .text {
  font-size: 2.5rem;
  padding-left: 15px;
 }

  .comment-actions {
  gap: 1.8rem;
  margin: 0.5rem 10px;
 }

  .comment-actions button.like-btn,
  .comment-actions button.dislike-btn {
  padding: 0.5rem 1.5rem;
  font-size: 2.2rem;
  border-radius: 15px;
  gap: 0.3rem;
 }

 .comment-actions button.reply-btn {
  font-size: 2.8rem;
  padding-left: 20px;
 }

 /* Reply Button for Replies */

.replies {
  margin-top: 1rem;
  padding-left: 2rem;
  border-left: 5px solid #444;
  gap: 2rem;
}


.reply {
  border-radius: 18px;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  margin: 15px 0px;
}



.reply .name {
  margin-bottom: 0rem;
  font-size: 3rem;
}

.reply .time {
  font-size: 1.8rem;
  right: 10px;
  top: 10px;
}


.reply-form {
  padding-left: 2rem;
}

.reply-form button.submit-reply {
  padding: 0.3rem 1rem;
  border-radius: 10px;
  font-size: 1.8rem;

}

.reply button {
  font-size: 2rem;
  margin: 25px 10px 10px;
}

.reply-form .reply-text {
  border-radius: 15px;
  padding: 0.5rem 1.5rem;
  font-size: 2rem;
  min-height: 120px;
  margin: 0px 0px 30px;
}

.show-more-btn {
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  margin: 10px auto 0 auto;
  font-size: 33px;
}

.show-replies-btn {
  border-radius: 8px;
  padding: 0.5rem 1.2rem;
  margin: 8px 0;
  font-size: 28px;
}

.more-replies-btn {
  border: 1.5px solid #00d26a;
  border-radius: 15px;
  padding: 6px 12px;
  font-size: 1.8rem;
}


.mention {
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 10px;
  font-size: 2.2rem;
}


/* Emoji Reactions Container */
.emoji-reactions {
  gap: 0.9rem;
  padding-left: 40px;
  bottom: 0px;
  margin-top: 0px;
}

.emoji-count {
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 1.8rem;
}

.custom-emoji-selector {
  border-radius: 15px;
  padding: 10px;
  border: 3px solid rgba(255, 255, 255, 0.3);
}

.selected-emoji {
  font-size: 1.8rem;
  padding: 6px 12px;
  border-radius: 13px;
}

.emoji-options {
  gap: 7px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 10px;
}


.emoji-option {
  font-size: 2.5rem;
  padding: 4px;
  border-radius: 12px;
}

.emoji-option::after {
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 1.6rem;
}

.emoji-option:hover::after {
  top: -50px;
}

.blank-comment-info {
  margin: 2rem 0;
  font-size: 35px;
}

}

@media screen and (min-width: 1400px){

  .game-container {
   padding: 1vw 0px 5px 3.5vw;
  }
   
  .game-header {
   gap: 4vw;
  } 
   
  .game-Image{
   width: 26vw;
  }
     
  .game-info h1 {
   font-size: 3.5vw;
   margin: 0 0 0rem 0;
   letter-spacing: 5px;
  }
   
  .clickable-publisher-top {
   font-size: 2.5vw;
  }
   
  .game-meta {
   gap: 10px;
   margin-top: 1.3vw;
  }
   
  .meta-item {
   border: 0.3vw solid #444;
    border-radius: 1.5vw;
   padding: 0.5rem 1rem;
   font-size: 2vw;
  }
   
  .like-dislike-box {
   margin-top: 1.3vw;
   gap: 2rem;
  }
   
  .like-dislike-box button {
   border: 0.2vw solid #444;
    border-radius: 1.5vw;
   padding: 0.8rem 3vw;
   font-size: 3.5vw;
   gap: 5px;
  }
   
  .Fav-box-2 {
   margin-top: 1.3vw;
   gap: 1rem;
  }
   
  .Fav-box-2 button {
   border: 0.3vw solid #444;
   padding: 0.5vw 1vw;
   font-size: 2.8vw;
   gap: 5px;
   border-radius: 1.5vw;
  }

  .favorite-2 .fa-star {
  font-size: 4vw;
  padding: 0rem 0.5rem;
  }
    
  .game-rating {
   padding: 0rem 2rem;
   margin-top: 1.3vw;
   font-size: 2rem;
   gap: 0rem;
   border: 0.2vw solid #777777;
   border-radius: 1.5vw;
  }
   
  .game-rating .star {
   font-size: 4.5vw;
   top: -0.7vw;
   position: relative;
  }
   
  .game-rating .star,
   #rating-value,
   #rating-count {
   margin-right: 1.5vw; 
  }
   
  #rating-value,
   #rating-count {
   top: 2px;
  }
   
  #rating-value {
   font-size: 3vw;
  }
   
  #rating-count {
   font-size: 2.5vw; 
   margin-left: 1px;
  }

  .details-container {
   margin-top: 4vw;
   gap: 1rem;
  }

  .details-grid {
   grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
   gap: 1rem;
   padding: 10px 20px;
  }
  
  .detail {
    margin: 2px 0px;
    padding: 1.5rem 2rem;
    margin: 0.5vw 0vw;
   font-size: 2.4vw;
  }

  .download-section {
   margin: 3vw 20px 5vw 0px;
  }
  .download-btn {
   border-radius: 2.5vw;
   width: 38vw;
   height: 10vw;
  }

  .icon48 {
    width: 10vw;
    height: 9vw;
    left: -11.5%;
  }

  .text48 {
    left: 5vw;
    font-size: 4vw;
  }

  .icon48::after {
   height: 0.4vw;
  }

  .light-beams::before,
  .light-beams::after {
   width: 0.4vw;
  }

  .internal-lines::before {
   width: 70%;
   height: 0.4vw;
   left: 50%;
  }

  .internal-lines::after {
   height: 0.4vw;
  }
  .genre-section {
   padding: 2vw 3vw;
   border-radius: 3vw;
   box-shadow: 1vw 1vw 0.3vw rgba(0,0,0,0.3);
   margin: 0px 2.5vw;
  }
 
 .genre-section h3 {
   border-left: 0.8vw solid #00d26a;
   padding-left: 1.5vw;
   font-size: 3.5vw;
   margin-bottom: 2vw;
  }
 
 .tag {
   font-size: 2.2vw;
   padding: 0.6vw 1.5vw;
  }
 
 .about-game-section {
   padding: 2vw 3vw;
   border-radius: 3vw;
   box-shadow: 1vw 1vw 0.3vw rgba(0,0,0,0.3);
   margin: 4vw 2.5vw;
  }
 
 .about-game-section h2 {
   border-left: 0.8vw solid #00d26a;
   padding-left: 1.5vw;
   font-size: 3.5vw;
   margin-bottom: 2vw;
  }
 
 .about-game-section p {
   font-size: 2.2vw;
  }
  .genre-tags {
  gap: 2vw;
 }

 .media-showcase {
  margin: 2vw 3vw;
 }
 
 .media-scroll {
  gap: 2vw;
 }
 
 .media-item {
  border-radius: 2vw;
 }
 
 .video-trailer, .media-item:not(.video-trailer) {
  height: 25vw;
 }

  .container {
   gap: 3vw;
   margin: 0px 0px;
  }
      
  .icon {
   width: 20vw;
   height: 10vw;
   border-radius: 2vw;
  }
    
  .icon .hover-text {
   bottom: 0px;
   font-size: 2vw;
   padding: 0.3vw 1vw;
  }

  .instagram i, .x i, .discord i {
   font-size: 7vw;
  }
  .discord:hover {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 15 100 100"><rect x="20" y="20" width="60" height="60" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="10"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.2s" repeatCount="indefinite" /></rect></svg>'), #4b56d2;
   background-size: 20vw 14vw , contain;
  }
  .join-us, .more-games {
   font-size: 5vw;
 }
 .join-us span::after {
   bottom: 2vw;
   height: 0.5vw;
 }
 .join-us::before {
   bottom: 1.5vw;
   height: 0.5vw;
 }

 .comment-section {
  padding: 2vw 3vw;
  margin: 4vw 2vw;
  border-radius: 2vw;
 }

 .comment-form {
  gap: 2vw;
 }

 .comment-section h2 {
   font-size: 5vw;
   margin-bottom: 1vw;
 }

 .comment-form input,
 .comment-form textarea {
   border-radius: 1.5vw;
   padding: 1vw 2.5vw;
   font-size: 3vw;
 }

 .comment-form input {
   min-height: 5vw;
  }
  
  .comment-form textarea {
   min-height: 15vw;
 }
 
 #comment-name {
   border-radius: 1.5vw;
   padding: 1vw 2.5vw;
   font-size: 3.5vw;
   word-spacing: 0.7vw;
 }

 .edit-icon {
   margin-left: 3vw;
   font-size: 3.8vw;
   padding: 1vw 1vw;
   border-radius: 1.2vw;
 }
 
  .comment-form button {
   padding: 1vw 2vw;
   border-radius: 1.2vw;
   font-size: 3.2vw;
   margin: 1vw 2vw 3vw;
 }

  .comment {
  padding: 2vw 3vw;
  border-radius: 2vw;
  gap: 2vw;
 }

 .avatar {
  width: 7vw;
  height: 7vw;
  font-size: 4vw;
 }

 .name {
  font-size: 3.5vw;
  padding-left: 0.7vw;
 }

 .time {
  font-size: 2.5vw;
  padding-left: 2.5vw;
  word-spacing: 0.7vw;
 }

 .text {
  font-size: 3.5vw;
  padding-left: 1.5vw;
 }

  .comment-actions {
  gap: 3vw;
  margin: 0.5vw 1vw;
  }

  .comment-actions button.like-btn,
  .comment-actions button.dislike-btn {
  padding: 0.5vw 1.5vw;
  font-size: 3.5vw;
  border-radius: 1.5vw;
  gap: 0.5vw;
  }

 .comment-actions button.reply-btn {
  font-size: 3.5vw;
  padding-left: 2vw;
  }
 
 /* Reply Button for Replies */

.replies {
  margin-top: 1vw;
  padding-left: 2vw;
  border-left: 0.5vw solid #444;
  gap: 2vw;
}


.reply {
  border-radius: 1.8vw;
  padding: 1vw 1rem;
  font-size: 1vw;
  margin: 1.5vw 0px;
}



.reply .name {
  margin-bottom: 0rem;
  font-size: 3.5vw;
}

.reply .time {
  font-size: 2.5vw;
  right: 10px;
  top: 10px;
}


.reply-form {
  padding-left: 2vw;
}

.reply-form button.submit-reply {
  padding: 0.6vw 1vw;
  border-radius: 1.5vw;
  font-size: 3vw;

}

.reply button {
  font-size: 3vw;
  margin: 2.5vw 1vw 1.5vw;
}

.reply-form .reply-text {
  border-radius: 1.5vw;
  padding: 0.5vw 1.5vw;
  font-size: 3vw;
  min-height: 12vw;
  margin: 0px 0px 3vw;
}

.show-more-btn {
  border-radius: 1.5vw;
  padding: 1.2vw 1.5vw;
  margin: 3vw auto 1vw auto;
  font-size: 4vw;
}

.show-replies-btn {
  border-radius: 1vw;
  padding: 0.5vw 1.2vw;
  margin: 1vw 0;
  font-size: 3vw;
}

.more-replies-btn {
  border: 0.2vw solid #00d26a;
  border-radius: 1vw;
  padding: 1vw 1.2vw;
  font-size: 2.8vw;
}


.mention {
  padding: 0.5vw 1vw;
  border-radius: 1vw;
  margin-right: 1vw;
  font-size: 3vw;
}

/* Emoji Reactions Container */
.emoji-reactions {
  gap: 1vw;
  padding-left: 3vw;
}

.emoji-count {
  padding: 0.25vw 0.6vw;
  border-radius: 1vw;
  font-size: 3.1vw;
}

.custom-emoji-selector {
  border-radius: 1vw;
  padding: 1.3vw;
  border: 0.3vw solid rgba(255, 255, 255, 0.3);
}

.selected-emoji {
  font-size: 2.9vw;
  padding: 0.6vw 1.2vw;
  border-radius: 1.3vw;
}

.emoji-options {
  gap: 0.8vw;
  margin-top: 1vw;
  padding: 1vw 2vw;
  border-radius: 1vw;
  max-width: 75vw;
}


.emoji-option {
  font-size: 4vw;
  padding: 0.4vw;
  border-radius: 1.2vw;
}

.emoji-option::after {
  padding: 0.4vw 1.5vw;
  border-radius: 1.5vw;
  font-size: 3vw;
}

.emoji-option:hover::after {
  top: -5vw;
}

.blank-comment-info {
  margin: 3vw 0;
  font-size: 3.5vw;
}

}

@media screen and (min-width: 2000px){
  .game-container {
   padding: 1vw 0px 5px 3vw;
  }
   
  .game-header {
   gap: 3vw;
  } 
  .game-Image{
   width: 30vw;
   position: relative;
   top: 1vw;
  }
  .clickable-publisher-top {
   font-size: 3vw;
  }
  .meta-item {
   padding: 0.8vw 1.5vw;
   font-size: 3vw;
   border: 0.2vw solid #444;
  }
  .like-dislike-box button {
  border: 0.5vw solid #444;
   padding: 0.5rem 3.5vw;
   font-size: 4vw;
   gap: 5px;
  }
  .like-dislike-box {
   margin-top: 1.7vw;
   gap: 2vw;
  }
  .Fav-box-2 {
   margin-top: 1.7vw;
   gap: 1rem;

  }
  .game-meta {
   gap: 1.5vw;
   margin-top: 1.3vw;
  }

  .game-rating {
   padding: 0rem 0rem 0vw 1.5vw;
   margin-top: 1.3vw;
   font-size: 0rem;
   gap: 0rem;
   border: 0.3vw solid #777777;
  }
  
  .details-container {
   margin-top: 4vw;
   gap: 1rem;
  }

  .details-grid {
   grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
   gap: 1rem;
   padding: 10px 20px;
   margin: 0vw 1vw;
  }
  
  .detail {
    margin: 2px 0px;
    padding: 1.3vw 1.8vw;
    margin: 0.5vw 0.5vw;
    font-size: 2.2vw;
  }

  .download-btn {
   width: 40vw;
   height: 11vw;
  }

  .icon48 {
    width: 10vw;
    height: 9vw;
    left: -10%;
  }

  .text48 {
    left: 5vw;
    font-size: 4vw;
  }
    .genre-section {
   padding: 2vw 3vw;
   border-radius: 3vw;
   box-shadow: 1vw 1vw 0.3vw rgba(0,0,0,0.3);
   margin: 0px 2.5vw;
  }
 
 .genre-section h3 {
   border-left: 0.8vw solid #00d26a;
   padding-left: 1.5vw;
   font-size: 3vw;
   margin-bottom: 2vw;
  }
 
 .tag {
   font-size: 2vw;
   padding: 0.6vw 1.5vw;
  }
 
 .about-game-section {
   padding: 2vw 3vw;
   border-radius: 3vw;
   box-shadow: 1vw 1vw 0.3vw rgba(0,0,0,0.3);
   margin: 4vw 2.5vw;
  }
 
 .about-game-section h2 {
   border-left: 0.8vw solid #00d26a;
   padding-left: 1.5vw;
   font-size: 3vw;
   margin-bottom: 2vw;
  }
 
 .about-game-section p {
   font-size: 1.8vw;
  }
  .genre-tags {
  gap: 2vw;
 }
 .video-trailer, .media-item:not(.video-trailer) {
  height: 28vw;
 }

 .container {
   gap: 3vw;
   margin: 0px 0px;
  }
      
  .icon {
   width: 18vw;
   height: 9vw;
   border-radius: 2vw;
  }
    
  .icon .hover-text {
   bottom: 0px;
   font-size: 2vw;
   padding: 0.3vw 1vw;
  }

  .instagram i, .x i, .discord i {
   font-size: 6vw;
  }
  .discord:hover {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=" 0 15 100 100"><rect x="20" y="20" width="60" height="60" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="10"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1.2s" repeatCount="indefinite" /></rect></svg>'), #4b56d2;
   background-size: 18vw 12vw , contain;
  }
}

@media (min-width: 9000px) and (max-height: 7000px) {
 
  .genre-section {
  margin: 2vw 14.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 13vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 14vw 3vw 1.5vw;
 }
 .details-container {
  margin: 3vw 12vw 0 0vw;
  }
  .details-grid {
  gap:  0.5vw 0.5vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 8000px) and (max-height: 6000px) {
 
  .genre-section {
  margin: 2vw 14.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 13vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 14vw 3vw 1.5vw;
 }

 .details-container {
  margin: 3vw 12vw 0 0vw;
  }
  .details-grid {
  gap:  0.5vw 0.5vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 7500px) and (max-height: 5500px) {
 
  .genre-section {
  margin: 2vw 14.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 13vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 14vw 3vw 1.5vw;
 }

 .details-container {
  margin: 3vw 12vw 0 0vw;
  }
  .details-grid {
  gap:  0.5vw 0.5vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 6500px) and (max-height: 5000px) {
 
  .genre-section {
  margin: 2vw 14.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 13vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 14vw 3vw 1.5vw;
 }

  .details-container {
  margin: 3vw 12vw 0 0vw;
  }
  .details-grid {
  gap:  0.5vw 0.5vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }

}
@media (min-width: 5000px) and (max-height: 4500px) {
 
  .genre-section {
  margin: 2vw 14.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 13vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 14vw 3vw 1.5vw;
 }

 .details-container {
  margin: 3vw 12vw 0 0vw;
  }
  .details-grid {
  gap:  0.5vw 0.5vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 3800px) and (max-height: 3000px) {
 
  .genre-section {
  margin: 2vw 14.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 13vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 14vw 3vw 1.5vw;
 }
  .details-container {
  margin: 3vw 12vw 0 0vw;
  }
  .details-grid {
  gap:  1vw 1vw;
  grid-template-columns: repeat(auto-fit, minmax(23vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 3300px) and (max-height: 2800px) {
 
  .genre-section {
  margin: 2vw 16vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 16vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 15vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 16vw 3vw 1.5vw;
 }
  .details-container {
  margin: 3vw 13vw 0 0vw;
  }
  .details-grid {
  gap:  1vw 1vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 2800px) and (max-height: 2500px) {
 
  .genre-section {
  margin: 2vw 16vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 16vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 15vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 16vw 3vw 1.5vw;
 }

  .details-container {
  margin: 3vw 13vw 0 0vw;
  }
  .details-grid {
  gap:  1vw 1vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 2300px) and (max-height: 2100px) {
 
  .genre-section {
  margin: 2vw 16vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 16vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 15vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 16vw 3vw 1.5vw;
 }
  .details-container {
  margin: 3vw 13vw 0 0vw;
  }

  .details-grid {
  gap:  1vw 1vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 2000px) and (max-height: 1800px) {
 
  .genre-section {
  margin: 2vw 16vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 16vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 15vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 16vw 3vw 1.5vw;
 }

  .details-container {
  margin: 3vw 13vw 0 0vw;
  }
  .details-grid {
  gap:  1vw 1vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
  }
  .detail {
  font-size: 2vw;
  }
}
@media (min-width: 1600px) and (max-height: 1400px) {
 
  .genre-section {
  margin: 2vw 15.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 15.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 15.5vw 3vw 1.5vw;
 }

 .details-container {
  margin: 3vw 13.5vw 0 0vw;
 }
 .details-grid {
  gap:  1vw 1vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
 }
 .detail {
  font-size: 2vw;
 }
}
@media (min-width: 1500px) and (max-height: 1400px) {
 
  .genre-section {
  margin: 2vw 15.5vw 2vw 1.5vw;
  }

  .about-game-section {
  margin: 3vw 15.5vw 3vw 1.5vw;
  }

 .media-showcase {
  margin: 3vw 14.5vw 3vw 1.5vw;
  }

 .comment-section {
  margin: 3vw 15.5vw 3vw 1.5vw;
 }

 .details-container {
  margin: 3vw 13.5vw 0 0vw;
 }
 .details-grid {
  gap:  1vw 1vw;
  grid-template-columns: repeat(auto-fit, minmax(21vw, 1fr));
 }
 .detail {
  font-size: 2vw;
 }
}
@media (min-width: 1024px) and (max-height: 1100px) {
 
  .genre-section {
  margin: 0px 15vw 0px 20px;
  }

  .about-game-section {
  margin: 30px 15vw 20px 20px;
  }

 .media-showcase {
  margin: 30px 14vw 20px 20px;
  }

 .comment-section {
  margin: 30px 14vw 20px 20px;
 }

 .details-container {
  margin: 30px 14.5vw 0px 20px;
 }
 .details-grid {
  gap:  1.5vw 1.5vw;
  grid-template-columns: repeat(auto-fit, minmax(31vw, 1fr));
 }
.detail {
  font-size: 2.9vw;
}
}