html,body{overflow-x:clip;overscroll-behavior-x:none}
#game-iframe{height:calc(100vh - 185px)}
body{position:relative;background:linear-gradient(to top,#00248D 0%,#010856 100%);background-repeat:no-repeat;background-size:cover;background-attachment:fixed;z-index:1}
body::before{content:'';position:fixed;inset:0;background-image:url(/assets/bg-img.svg);background-repeat:repeat-y;background-position:center top;background-size:920px auto;opacity:.3;pointer-events:none;z-index:0}
body > *{position:relative}
.neon-glow{box-shadow:0 0 0 2px #22d3eee6 0 0 20px #22d3ee99}
.neon-glow-mobile{box-shadow:0 0 0 2px #22d3eee6 0 0 10px #22d3ee99}
.neon-glow-hover:hover{box-shadow:0 0 0 2px #22d3eeff 0 0 28px #22d3eee6}
.game-card{width:250px;height:380px;border:2px solid #09F;border-radius:15px;overflow:hidden;background:#031FA7;display:flex;flex-direction:column;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 4px 0 #00000040}
.game-card.has-label {border:3px solid #ffc100;}
.rive-popover {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.rive-popover.hidden {
  display: none;
}

.rive-popover-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 8, 86, 0.7);
  backdrop-filter: blur(4px);
}

.rive-popover-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
}

.rive-popover-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.top-rive-banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-rive-canvas {
  width: 800px;
  max-width: 100%;
  height: auto;
  display: block;
}
.rive-sound-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.rive-click-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
  cursor: pointer;
}

.rive-sound-toggle:hover {
  background: rgba(0, 0, 0, 0.6);
}
#get-shortcut-btn {
    width: 240px; 
    height: 45px;
    background: #FEC20E;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: #031FA7;
    margin: 30px auto 0px;
    transition: all 0.3s ease;
 }
 #get-shortcut-btn:hover{
    background-color: #FEAA0E;
 }
.rive-popover-dialog,
.top-rive-banner,
.top-rive-canvas {
  touch-action: manipulation;
}
@media screen and (min-width: 769px) {
.game-card:hover{transform:scale(1.04);border-color:#22d3ee99}
}
.game-card-image{width:250px;height:250px;object-fit:cover; border-top-left-radius: 15px;border-top-right-radius: 15px;}
.game-card-content{flex:1;display:flex;flex-direction:column;padding:20px 5px;gap:15px}
.game-card-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:14px;line-height:30px;letter-spacing:0;text-align:center;color:#fff;flex:1;display:flex;align-items:center;justify-content:center}
.play-now-button,#play-real-btn{width:154px;height:45px;background:#FF0059;color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;line-height:30px;letter-spacing:0;padding:0;border-radius:8px;border:none;cursor:pointer;text-align:center;transform:rotate(0deg);opacity:1;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto}
#play-real-btn{width:120px;padding:0 5px}
.play-now-button svg{width:20px;height:19px;flex-shrink:0}
.play-now-button:hover,#play-real-btn:hover{background:#E6004F;box-shadow:0 4px 12px #ff005966}
.swiper-slide{width:250px!important;padding:0}
.mobile-slider-nav{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:16px}
.mobile-slider-arrow{background:transparent;border:none;padding:0;line-height:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mobile-slider-arrow.next svg{transform:scaleX(-1)}
.mobile-swiper-pagination{display:block;width:280px;overflow-x:auto;overflow-y:hidden;padding:10px 0;margin-top:-10px;scroll-behavior:smooth;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.mobile-swiper-pagination::-webkit-scrollbar{width:0;height:0;display:none}
.mobile-swiper-pagination .swiper-pagination-bullet{display:inline-block;width:12px;height:12px;margin:0 4px!important;border-radius:9999px;background:#3C9ECA;opacity:1;vertical-align:middle}
.mobile-swiper-pagination .swiper-pagination-bullet-active{background:#FFB800}
.slide-counter{font-family:'Poppins',sans-serif;font-size:13px;line-height:20px;text-align:center;background:#001d80ab;width:58px;position:absolute;top:20px;left:20px;z-index:1;border-radius:5px;color:#fff;padding:5px}
.footer-text{font-family:'Poppins',sans-serif;font-weight:900;font-size:18px;line-height:32px;letter-spacing:0;text-align:center}
.footer-text-r2{font-family:'Poppins',sans-serif;font-weight:400;font-size:12px;line-height:32px;letter-spacing:0;text-align:center;border-top:1px solid #ffffff4d}
.fade-in-up{opacity:0;transform:translateY(12px);transition:opacity 550ms ease,transform 550ms ease;will-change:opacity,transform}
.fade-in-up.is-visible{opacity:1;transform:translateY(0)}
.fade-in-up{transition-delay:var(--delay,0ms)}
.hero-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:38px;line-height:90px;letter-spacing:0;text-align:center}
.hero-subtitle{font-family:'Poppins',sans-serif;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;text-align:center}
#promo-text{font-family:'Poppins',sans-serif;font-weight:600;font-style:normal;font-size:16px;line-height:18px;letter-spacing:0;color:#000}
.iframe-loader{display:flex;align-items:center;gap:8px}
.iframe-loader span{color:#fff;font-size:28px;line-height:1;animation:iframeLoaderPulse .9s infinite ease-in-out}
.iframe-loader span:nth-child(2){animation-delay:.1s}
.iframe-loader span:nth-child(3){animation-delay:.2s}
.iframe-loader span:nth-child(4){animation-delay:.3s}
.iframe-loader span:nth-child(5){animation-delay:.4s}
@keyframes iframeLoaderPulse {
0%,100%{opacity:.25;transform:scaleY(0.7)}
50%{opacity:1;transform:scaleY(1.15)}
}
.site-header{position:relative;margin-top:15px;display:flex;justify-content:center;opacity:1}
.site-logo{width:233px;height:62px}
.container-6cards{max-width:1650px;width:100%}
#desktop-grid{grid-template-columns:repeat(6,minmax(0,1fr)); width: fit-content; margin: 0 auto;}
@media (max-width: 1599px) {
#desktop-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width: 1339px) {
#desktop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width: 1075px) {
.hero-title{font-size:26px;line-height:30px}
#desktop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 767px) {
  .rive-popover-dialog {top:0; left: 0; right: 0; transform: none; max-width: 100%; height: 100%;}
  .top-rive-canvas {max-width: 590px;}
  .rive-popover-dialog {
    width: 100%;
  }
#back-to-top{display:none}
#promo-section{height:122px;overflow:hidden}
#promo-text{font-size:14px;line-height:16px}
.container-6cards{max-width:100%;width:100%}
#mobile-carousel{overflow:visible}
#mobile-carousel .swiper{overflow:visible}
}
.back-to-top{position:fixed;bottom:10px;right:80px;width:70px;height:70px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:all .3s ease;z-index:1000;padding:5px;gap:8px}
.back-to-top.visible{opacity:1;visibility:visible}
.back-to-top:hover{transform:translateY(-5px)}
.back-to-top svg{filter:drop-shadow(0 4px 4px #00000040)}
.game-card {
  position: relative;
  overflow: visible;
}

.game-card-label {
    top: -64px;
    left: 0;
    z-index: 3;
    pointer-events: none;
    position: absolute;
    right: 0;
    margin: auto;
}

.rive-label-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.game-card.has-label::before {
  content: "";
  background-image: url(/assets/label.png);
  display: block;
  width: 100%;
  height: 100%;
  max-width: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -64px;
  left: 0;
  right: 0;
  margin: auto;
  transform: rotateX(10deg);
}

/* 👇 Hide fallback when Rive is ready */
.game-card.rive-loaded::before {
  display: none;
}

#desktop-grid {
  min-height: 795px;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.game-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 320 / 420;
  object-fit: cover;
}


.game-card.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #1a1a1a;
}

/* Image area */
.game-card.skeleton::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 320 / 420;
  background: #031FA7;
  height: 100%;
}

/* Content area */
.game-card.skeleton::after {
  content: "";
  display: block;
  height: 60px;
  background: #1a1a1a;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.game-card.skeleton {
  position: relative;
}

.game-card.skeleton::before,
.game-card.skeleton::after {
  position: relative;
  overflow: hidden;
}

/* shimmer layer */
.game-card.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 75%
  );
  animation: skeleton-shimmer 1.4s infinite;
  top: 0;
  bottom: 0;
  height: 100%;
}
.skeleton-slide {margin-right: 20px;}