:root {


  --group89-black: #211914;


  --group89-brown: #392920;


  --group89-brown-light: #684b3a;


  --group89-gold: #d8ad55;


  --group89-gold-light: #f2d797;


  --group89-cream: #f5ece1;


}





/* GROUP 89 FAQ and reviews */


.faq-section {


  max-width: 900px;


  margin: 50px auto;


  padding: 30px;


  background: #211914;


  border-radius: 20px;


  box-shadow: 0 0 25px rgba(33, 25, 20, 0.15);


  font-family: "Segoe UI", sans-serif;


}





.faq-section h3,


.review-section h2 {


  margin-bottom: 25px;


  color: #f2d797;


  font-size: 28px;


  text-align: center;


}





.faq-section h3 {


  letter-spacing: 1px;


}





.faq-item {


  margin-bottom: 15px;


  overflow: hidden;


  border: 1px solid rgba(216, 173, 85, 0.25);


  border-radius: 12px;


}





.faq-question {


  position: relative;


  width: 100%;


  padding: 18px 20px;


  color: #fff;


  font-size: 16px;


  text-align: left;


  cursor: pointer;


  background: linear-gradient(90deg, #392920, #51372c, #684b3a);


  border: 0;


  transition: 0.3s;


}





.faq-question:hover,


.review-section .review-item:hover {


  background: linear-gradient(90deg, #51372c, #684b3a);


}





.faq-question::after {


  position: absolute;


  right: 20px;


  color: #f2d797;


  font-size: 20px;


  content: "+";


  transition: 0.3s;


}





.faq-item.active .faq-question::after {


  content: "-";


}





.faq-answer {


  max-height: 0;


  overflow: hidden;


  background: #2b201a;


  transition: max-height 0.4s ease;


}





.faq-answer p {


  padding: 15px 20px;


  color: #f5ece1;


  font-size: 14px;


  line-height: 1.6;


}





.review-section {


  max-width: 900px;


  margin: 40px auto;


  padding: 30px;


  font-family: "Segoe UI", sans-serif;


  background: #211914;


  border-radius: 20px;


  box-shadow: 0 0 25px rgba(216, 173, 85, 0.18);


}





.review-section .review-list {


  display: flex;


  flex-direction: column;


  gap: 15px;


}





.review-section .review-item {


  padding: 18px 20px;


  background: linear-gradient(90deg, #392920, #51372c, #684b3a);


  border: 1px solid rgba(216, 173, 85, 0.18);


  border-radius: 12px;


  transition: 0.3s;


}





.review-section .review-item:hover {


  box-shadow: 0 0 15px rgba(216, 173, 85, 0.18);


  transform: translateY(-2px);


}





.review-section .review-header {


  display: flex;


  justify-content: space-between;


}





.review-section .review-header strong {


  color: #fff;


}





.review-section .stars {


  color: #f2d797;


}





.review-section .review-item p {


  color: #f5ece1;


  font-size: 14px;


  line-height: 1.6;


}





@media (max-width: 600px) {


  .review-section {


    padding: 20px;


  }





  .review-section .review-header {


    flex-direction: column;


    gap: 5px;


  }


}





.popular-games .group89-character-image {


  object-fit: contain;


  object-position: center;


}





/* Header and account buttons */


.site-header {


  background: linear-gradient(180deg, #392920 0%, #211914 100%) !important;


  border-bottom-color: var(--group89-gold) !important;


}





.site-header .top-menu > li[data-active="true"],


.site-header .top-menu > li:hover {


  color: var(--group89-gold-light) !important;


  background-color: rgba(217, 164, 65, 0.16) !important;


}





.login-panel .register-button,


.login-panel .login-button {


  background: linear-gradient(180deg, #f2d797 0%, #d8ad55 100%) !important;


  border-color: #8a560e !important;


  color: #1b1207 !important;


  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);


}





.login-panel .register-button:hover,


.login-panel .login-button:hover {


  background: linear-gradient(180deg, #ffe197 0%, #c58a28 100%) !important;


}





/* Section labels and game borders */


.home-game-list-container .container-title span,


.home-game-list-container .container-title span::after,


.popular-game-title-container .container-title span,


.popular-game-title-container .container-title span::after,


.lottery-result-container .lottery-result-title {


  background: linear-gradient(90deg, #51372c, #684b3a) !important;


  color: #fff8e8 !important;


}





.home-game-list-container .container-content,


.popular-game-title-container .container-content {


  border-color: var(--group89-gold) !important;


}





.home-game-list-container .container-content .game-list .game-item .game-name,


.popular-game-title-container


  .container-content


  .game-list


  .game-item


  .game-name {


  color: #8a5a16 !important;


}





/* Winner panel */


.winners-ticker ul {


  background: linear-gradient(135deg, #201409, #674116) !important;


}





.winners-ticker ul li .winner-info,


.winners-ticker ul li .winner-amount {


  color: var(--group89-gold-light) !important;


}





/* Download application area */


.download-apk-container {


  background: linear-gradient(


    135deg,


    #211914 0%,


    #3b250d 55%,


    #a36a18 100%


  ) !important;


  border-top: 2px solid var(--group89-gold);


  border-bottom: 2px solid var(--group89-gold);


}





.download-apk,


.download-apk .h2,


.download-apk h3 {


  color: #fff8e8 !important;


}





.download-apk-section i {


  color: var(--group89-gold-light) !important;


}





/* FAQ and user reviews */


.faq-section,


.review-section {


  background: linear-gradient(145deg, #211914, #392920) !important;


  border: 1px solid #9b7956 !important;


  box-shadow: 0 10px 30px rgba(112, 70, 14, 0.25) !important;


}





.faq-section h3,


.review-section h2 {


  color: var(--group89-gold-light) !important;


}





.faq-item {


  border-color: rgba(217, 164, 65, 0.45) !important;


}





.faq-question,


.review-section .review-item {


  background: linear-gradient(90deg, #392920, #51372c, #684b3a) !important;


  border-color: rgba(244, 210, 124, 0.35) !important;


  color: #fffaf0 !important;


}





.faq-question:hover,


.review-section .review-item:hover {


  background: linear-gradient(90deg, #51372c, #684b3a, #765542) !important;


}





.faq-question::after,


.review-section .stars {


  color: #ffe8aa !important;


}





.faq-answer {


  background: #2b201a !important;


}





.faq-answer p,


.review-section .review-item p {


  color: var(--group89-cream) !important;


}





/* Article heading and highlighted brand text */


.site-description h1,


.site-description h2,


.site-description h3,


.site-description a {


  color: #71452e !important;


}





.site-description div {


  color: #392920 !important;


}





.site-description {


  border-color: rgba(155, 104, 29, 0.45) !important;


}





.modal-body p strong span {


  color: #71452e !important;


}





/* Telegram contact button */


.contact-list > li a {


  background: #f1eadc !important;


  color: #805313 !important;


  border: 1px solid rgba(155, 104, 29, 0.3);


}





.contact-list > li a i {


  background: linear-gradient(145deg, #e2b555, #9b6215) !important;


}





.contact-list > li a i img {


  filter: brightness(0) saturate(100%) invert(8%) sepia(20%) saturate(950%)


    hue-rotate(354deg) brightness(90%) contrast(100%);


}





/* Lottery card */


.lottery-result-container {


  border: 1px solid #b9842f;


  background: #f4ecdc !important;


}





.lottery-result-container .lottery-result,


.home-jackpot-container .lottery-result,


.lottery-result-container .lottery-date {


  background: #f4ecdc !important;


  color: #59380e !important;


}





.lottery-result-container .lottery-result picture img {


  filter: none;


}





/* Banner navigation dots */


.banner .carousel-indicators .active,


.banner .carousel-indicators .slick-active {


  background-color: var(--group89-gold) !important;


  border-color: var(--group89-gold-light) !important;


}





/* Responsive welcome popup: keep its layout inside the viewport. */
#popup_modal {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  padding: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}
#popup_modal .modal-dialog {
  position: relative;
  left: auto;
  right: auto;
  display: flex;
  align-items: center;
  width: calc(100% - 24px);
  max-width: 620px;
  min-width: 0;
  min-height: 100%;
  margin: 0 auto;
  padding: 12px 0;
  box-sizing: border-box;
}
#popup_modal .modal-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  border: 2px solid var(--group89-gold) !important;
  background: #fffdf8;
}
#popup_modal .modal-header,
#popup_modal .modal-body,
#popup_modal .modal-footer {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
#popup_modal .modal-header {
  position: relative;
  height: auto;
  padding: 16px 36px 12px;
}
#popup_modal .modal-header .close {
  position: absolute;
  top: 10px;
  right: 10px;
}
#popup_modal .modal-header h4 {
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  color: #825040;
  font-size: 18px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
#popup_modal .modal-body {
  padding: 8px 16px 12px;
}
#popup_modal .popup-thumbnail {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto 12px;
}
#popup_modal .popup-account-actions {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
}
#popup_modal .popup-account-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #825040;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
}
#popup_modal .popup-login {
  background: #51372c;
  color: #fff;
}
#popup_modal .popup-register {
  background: linear-gradient(180deg, #f2d797, #d8ad55);
  color: #211914;
}
#popup_modal .popup-account-actions a:hover {
  filter: brightness(1.08);
}
#popup_modal .popup-account-actions a:focus-visible {
  outline: 2px solid #825040;
  outline-offset: 3px;
}
#popup_modal .popup-thumbnail img {
  display: block;
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 auto;
  object-fit: contain;
}
#popup_modal .modal-body p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
#popup_modal .modal-footer {
  padding: 12px 16px;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 600px) {
  #popup_modal .modal-header h4 {
    font-size: 14px;
  }
  #popup_modal .modal-body {
    padding: 8px 10px 12px;
  }
  #popup_modal .modal-body p {
    font-size: 12px;
  }
}