.game-card, .popup-content {
  box-shadow : 0 0 15px rgba(0, 0, 0, .2);
}
.nav-menu, .popup-content button {
  transition : background-color .3s;
}
.bar, .nav-menu {
  white-space : nowrap;
}
body {
  max-width : 1140px;
  font-family : Roboto, sans-serif;
  background-color : #290808;
  color : #fff;
  margin : auto;
  padding : 10px;
}
.header {
  display : flex;
  flex-direction : column;
  align-items : center;
  text-align : center;
  margin-bottom : 20px;
}
.header img.logo {
  max-width : 150px;
  margin-bottom : 20px;
}
.header img.banner {
  max-width : 100%;
  margin-bottom : 20px;
  border-radius: 10px;
}
.logo-container {
  display : flex;
  align-items : center;
  justify-content : space-between;
  width : 100%;
}
.rtp-update {
  text-align : right;
  font-size : .85em;
  color : #fc0;
}
.header .buttons a, .nav-menu {
  color : #fff;
  text-decoration : none;
  text-align : center;
}
.header .buttons {
  display : grid;
  grid-template-columns : 1fr 1fr;
  gap : 20px;
  width : 100%;
  margin : 0 auto 20px;
}
.header .buttons a {
  background-color : #AF1740;
  padding : 10px 20px;
  border-radius : 5px;
  font-weight : 700;
}
.header .buttons a.daftar, .header .search button {
  background-color : #CC2B52;
  color : #fff;
}
.header .search {
  display : grid;
  grid-template-columns : 1fr auto;
  gap : 10px;
  width : 100%;
  margin : 0 auto 20px;
}
.header .search input {
  padding : 10px;
  border-radius : 5px;
  border : none;
  width : 100%;
}
.header .search button, .nav-menu {
  padding : 10px 20px;
  font-weight : 700;
}
.header .search button {
  border-radius : 5px;
  border : none;
  cursor : pointer;
  width : 100%;
}
.nav-wrapper {
  border : 12px solid #990000;
  overflow-x : auto;
  max-width : 100%;
  margin : 0 auto;
  scrollbar-width : thin;
  scrollbar-color : #CD1818 #990000;
}
.nav-container {
  display : grid;
  grid-template-rows : repeat(2, auto);
  grid-auto-flow : column;
  gap : 10px;
  background-color : #990000;
  width : max-content;
}
.nav-menu {
  margin : 5px 0;
  border-radius : 20px;
  background-color : #CD1818;
}
.nav-menu:hover {
  background-color : #950101;
}
.nav-wrapper::-webkit-scrollbar {
  height : 8px;
}
.game-card img {
  cursor: pointer;
}

.nav-wrapper::-webkit-scrollbar-track {
  background : #990000;
}
.nav-wrapper::-webkit-scrollbar-thumb {
  background-color : #CD1818;
  border-radius : 10px;
  border : 2px solid #990000;
}
.nav-wrapper::-webkit-scrollbar-thumb:hover {
  background-color : #950101;
}
.container {
  width : 100%;
  max-width : 1140px;
  margin : auto;
  display : grid;
  grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));
  gap : 15px;
}
.game-card {
  background : #A13333;
  padding : 10px;
  border-radius : 12px;
  text-align : center;
}
.game-card img {
  width : 100%;
  border-top-left-radius : 12px;
  border-top-right-radius : 12px;
}
.game-title {
  background : #990000;
  min-height : 24px;
  font-size : .7em;
  font-weight : 700;
  padding : 5px;
  color : #fc0;
  text-transform : uppercase;
  text-align : center;
  align-content : center;
}
.progress-bar-container {
  background : #144714;
  border-radius : 8px;
  overflow : hidden;
  margin : 10px 0;
  position : relative;
}
.progress-bar {
  height : 18px;
  text-align : right;
  padding-right : 10px;
  color : transparent;
  line-height : 18px;
  border-radius : 8px 0 0 8px;
  font-size : .9em;
  width : 0;
  transition : width 1s ease-in-out;
  background-image : linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-size : 40px 40px;
  animation : 1s linear infinite moveBackground;
}
@keyframes moveBackground {
  0% { background-position : 0 0; }
  100% { background-position : 40px 40px; }
}
.bar-chart .bar, .pola-slot-table .pola-result .success, .progress-bar.green {
  background-color : #4caf50;
}
.progress-bar.orange {
  background-color : #ff9800;
}
.pola-slot-table .pola-result .fail, .progress-bar.red {
  background-color : #f44336;
}
.progress-bar-text {
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  display : flex;
  align-items : center;
  justify-content : center;
  color : #fff;
  font-weight : 700;
  font-size : .85em;
}
.game-info {
  min-height : 114px;
  background : #990000;
  padding : 10px;
  border-radius : 8px;
  margin-top : 10px;
}
.game-info p, .pola-slot {
  margin : 5px 0;
  font-size : .8em;
}
.gacor-time {
  color : #fc0;
  font-weight : 700;
}
.pola-slot {
  min-height : 84px;
  color : #fff;
  display : flex;
  justify-content : center;
  align-items : center;
  text-align : center;
  flex-direction : column;
}
.pola-slot-table {
  width : 100%;
  border-collapse : collapse;
}
.pola-slot-table td {
  padding : 5px;
  text-align : left;
  font-size : .8em;
}
.pola-slot-table .pola-value {
  text-align : right;
  font-weight : 700;
}
.pola-slot-table .pola-result, .popup-content {
  text-align : center;
}
.pola-slot-table .pola-result span {
  display : inline-block;
  width : 16px;
  height : 16px;
  border-radius : 50%;
}
.pola-unavailable {
  color : #f44;
  font-weight : 700;
}
@media screen and (max-width : 1024px) {
  .container {
    grid-template-columns : repeat(auto-fit, minmax(150px, 1fr));
    gap : 10px;
  }
  .game-card {
    padding : 10px;
  }
  .game-title {
    font-size : .9em;
  }
  .progress-bar, .progress-bar-text {
    font-size : .8em;
  }
  .progress-bar {
    height : 16px;
  }
  .game-info p, .pola-slot {
    font-size : .75em;
  }
}
@media screen and (max-width : 768px) {
  .container {
    grid-template-columns : repeat(auto-fit, minmax(120px, 1fr));
  }
  .game-card {
    padding : 8px;
  }
  .game-title {
    font-size : .8em;
  }
  .progress-bar, .progress-bar-text {
    font-size : .75em;
  }
  .progress-bar {
    height : 14px;
  }
  .game-info p, .pola-slot {
    font-size : .7em;
  }
}
.popup {
  display : none;
  position : fixed;
  z-index : 9;
  left : 0;
  top : 0;
  width : 100%;
  height : 100%;
  overflow : auto;
  background-color : rgba(0, 0, 0, .4);
  justify-content : center;
  align-items : center;
}
.popup-container {
  padding : 20px;
  border : none;
  width : auto;
}
.popup-content {
  background-color : #fff;
  border-radius : 8px;
  padding : 20px;
  max-width : 400px;
  margin : auto;
}
.popup-content h2 {
  font-size : 24px;
  margin-bottom : 20px;
  color : #333;
}
.popup-content input[type=number] {
  width : 100%;
  padding : 10px;
  margin-bottom : 15px;
  border-radius : 5px;
  border : 1px solid #ccc;
  font-size : 16px;
  box-sizing : border-box;
  background-color : #f9f9f9;
  transition : border-color .3s;
}
.popup-content button, .popup-content button:hover {
  background-color : #950101;
}
.popup-content input[type=number]:focus {
  border-color : #950101;
  outline : 0;
}
.popup-content button {
  width : 100%;
  color : #fff;
  padding : 10px;
  border-radius : 5px;
  border : none;
  font-size : 16px;
  cursor : pointer;
}
.simulation-result-container {
  margin-top : 20px;
  border-top : 1px solid #eee;
}
.simulation-result-container p {
  font-size : 16px;
  color : #333;
  margin : 10px 0;
}
.close {
  color : #aaa;
  float : right;
  font-size : 28px;
  font-weight : 700;
}
.close:focus, .close:hover, .simulasi-button {
  color : #fff;
  text-decoration : none;
  cursor : pointer;
}
.simulasi-button {
  background-color : #CC2B52;
  padding : 5px 10px;
  border-radius : 5px;
  font-weight : 700;
  margin-top : 10px;
  display : inline-block;
}
.simulation-result-container {
  text-align : center;
  padding : 20px;
}
.probability-text {
  font-weight : 700;
  color : #4caf50;
}
.winning-amount-text {
  font-weight : 700;
  color : #ff9800;
}
.explanation {
  line-height : 1.5;
  margin-top : 20px;
  text-align : left;
  color : #555;
  font-size : .9em;
}
.bar-chart {
  margin-top : 20px;
  width : 100%;
  background-color : #f1f1f1;
  border-radius : 8px;
  overflow : hidden;
  position : relative;
  height : 30px;
}
.bar {
  height : 100%;
  color : #fff;
  text-align : right;
  padding-right : 10px;
  line-height : 30px;
  border-radius : 8px 0 0 8px;
  transition : width .4s ease-in-out;
}
.header-container {
  display : flex;
  justify-content : space-between;
  align-items : center;
  margin-bottom : 20px;
  padding : 10px;
  background-color : #990000;
  border-radius : 5px;
}
.running-text {
  flex : 1;
  color : #fc0;
  font-weight : 700;
  padding-right : 20px;
}
.filter-container {
  position : relative;
  display : inline-block;
  text-align : right;
}
.filter-container select {
  padding : 8px 30px 8px 12px;
  font-size : 16px;
  border-radius : 5px;
  border : 1px solid #ccc;
  color : #333;
  cursor : pointer;
  appearance : none;-webkit-appearance : none;-moz-appearance : none;
  background : #fff;
}
.filter-container select:hover {
  border-color : #4caf50;
}
.filter-container select:focus {
  border-color : #4caf50;
  box-shadow : 0 0 5px rgba(76, 175, 80, .5);
  outline : 0;
}
.filter-container::after {
  content : '\25BC';
  font-size : 12px;
  color : #333;
  position : absolute;
  right : 10px;
  top : 50%;
  transform : translateY(-50%);
  pointer-events : none;
}