/* SKYROO AUS Landing Page V6 | Standalone Hostinger version */
/* =========================================================
   SKYROO AUS LANDING PAGE V6
   FIXED SCROLL VERSION
========================================================= */


/* =========================================================
   GLOBAL SCROLL RESET
========================================================= */

html.sr-landing-mode{

  width:100% !important;

  height:auto !important;

  min-height:100% !important;

  max-height:none !important;


  margin:0 !important;

  padding:0 !important;


  position:static !important;


  overflow-x:hidden !important;

  overflow-y:auto !important;


  background:#ffffff !important;


  touch-action:pan-y !important;


  overscroll-behavior-y:auto !important;

}


html.sr-landing-mode body,
body.sr-landing-mode{

  width:100% !important;

  max-width:none !important;


  height:auto !important;

  min-height:100vh !important;

  max-height:none !important;


  margin:0 !important;

  padding:0 !important;


  position:static !important;


  top:auto !important;

  right:auto !important;

  bottom:auto !important;

  left:auto !important;


  overflow-x:hidden !important;

  overflow-y:auto !important;


  background:#ffffff !important;


  touch-action:pan-y !important;


  overscroll-behavior-y:auto !important;


  -webkit-overflow-scrolling:touch !important;

}


/* =========================================================
   REMOVE POSSIBLE APP SCROLL LOCK
========================================================= */

html.sr-landing-ready,
html.sr-landing-ready body{

  overflow-y:auto !important;

  height:auto !important;

  min-height:100% !important;

  max-height:none !important;

}


html.sr-landing-ready body{

  min-height:100vh !important;

}


/* =========================================================
   HIDDEN ORIGINAL SYSTEM UI
========================================================= */

html.sr-landing-mode .sr-system-hidden,
body.sr-landing-mode .sr-system-hidden{

  display:none !important;

  visibility:hidden !important;

  opacity:0 !important;


  width:0 !important;

  height:0 !important;


  min-width:0 !important;

  min-height:0 !important;


  max-width:0 !important;

  max-height:0 !important;


  margin:0 !important;

  padding:0 !important;


  border:0 !important;


  overflow:hidden !important;


  pointer-events:none !important;

}


/* =========================================================
   KNOWN ORIGINAL SYSTEM UI
========================================================= */

html.sr-landing-mode .header-frame,
html.sr-landing-mode .header-wrapper,
html.sr-landing-mode .header-container,
html.sr-landing-mode .header-placeholder,

html.sr-landing-mode .top-header,
html.sr-landing-mode .top-nav,
html.sr-landing-mode .nav-wrapper,

html.sr-landing-mode .gc-header,

html.sr-landing-mode nav.gc-footer,
html.sr-landing-mode .gc-footer,

html.sr-landing-mode .footer-frame,
html.sr-landing-mode .footer-container,

html.sr-landing-mode #footer-section,

html.sr-landing-mode .bottom-nav,
html.sr-landing-mode .bottom-menu,

html.sr-landing-mode .mobile-nav,
html.sr-landing-mode .mobile-menu,
html.sr-landing-mode .mobile-cta,

html.sr-landing-mode .toggle-btn,

html.sr-landing-mode #loader,

html.sr-landing-mode header.header:not(.sr-header),

body.sr-landing-mode .header-frame,
body.sr-landing-mode .header-wrapper,
body.sr-landing-mode .header-container,
body.sr-landing-mode .header-placeholder,

body.sr-landing-mode .top-header,
body.sr-landing-mode .top-nav,
body.sr-landing-mode .nav-wrapper,

body.sr-landing-mode .gc-header,

body.sr-landing-mode nav.gc-footer,
body.sr-landing-mode .gc-footer,

body.sr-landing-mode .footer-frame,
body.sr-landing-mode .footer-container,

body.sr-landing-mode #footer-section,

body.sr-landing-mode .bottom-nav,
body.sr-landing-mode .bottom-menu,

body.sr-landing-mode .mobile-nav,
body.sr-landing-mode .mobile-menu,
body.sr-landing-mode .mobile-cta,

body.sr-landing-mode .toggle-btn,

body.sr-landing-mode #loader,

body.sr-landing-mode header.header:not(.sr-header){

  display:none !important;

  visibility:hidden !important;


  height:0 !important;

  min-height:0 !important;

  max-height:0 !important;


  margin:0 !important;

  padding:0 !important;


  border:0 !important;


  overflow:hidden !important;

}


/* =========================================================
   ORIGINAL LOADER
========================================================= */

html.sr-landing-mode #loading:not(#srLandingLoader),
body.sr-landing-mode #loading:not(#srLandingLoader){

  display:none !important;

}


/* =========================================================
   LANDING ROOT
========================================================= */

#srLandingPage,
#srLandingPage *{

  box-sizing:border-box;

}


#srLandingPage{

  --blue:#0968e8;

  --blue2:#238cff;

  --blue3:#71beff;

  --navy:#10233f;

  --text:#1c2b3d;

  --muted:#71839a;

  --line:#dce9f5;

  --soft:#f5faff;

  --white:#ffffff;


  position:relative !important;


  z-index:10 !important;


  width:100% !important;

  max-width:none !important;


  height:auto !important;

  min-height:100vh !important;

  max-height:none !important;


  margin:0 !important;

  padding:0 !important;


  overflow:visible !important;


  touch-action:pan-y !important;


  color:
    var(--text);


  background:
    #ffffff !important;


  font-family:

    Inter,

    ui-sans-serif,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    Arial,

    sans-serif;


  -webkit-font-smoothing:
    antialiased;


  opacity:0;

  visibility:hidden;

}


html.sr-landing-ready #srLandingPage{

  opacity:1;

  visibility:visible;


  transition:
    opacity .24s ease;

}


#srLandingPage a{

  color:inherit;

  text-decoration:none;

}


#srLandingPage button,
#srLandingPage input{

  font:inherit;

}


#srLandingPage button{

  cursor:pointer;

}


#srLandingPage img{

  display:block;

}


#srLandingPage .sr-wrap{

  width:
    min(
      1240px,
      calc(100% - 36px)
    );


  margin:
    0 auto;

}


/* =========================================================
   LOADER
========================================================= */

#srLandingLoader,
#srLandingLoader *{

  box-sizing:border-box;

}


#srLandingLoader{

  position:fixed !important;


  inset:0 !important;


  z-index:
    2147483647 !important;


  width:
    100vw !important;


  height:
    100dvh !important;


  display:grid !important;


  place-items:center !important;


  overflow:hidden !important;


  margin:0 !important;

  padding:0 !important;


  opacity:1 !important;

  visibility:visible !important;


  pointer-events:all !important;


  background:

    radial-gradient(
      circle at 18% 16%,
      rgba(35,140,255,.15),
      transparent 31%
    ),

    radial-gradient(
      circle at 82% 78%,
      rgba(9,104,232,.11),
      transparent 31%
    ),

    linear-gradient(
      180deg,
      #ffffff 0%,
      #f4f9ff 100%
    ) !important;


  font-family:

    Inter,

    ui-sans-serif,

    -apple-system,

    BlinkMacSystemFont,

    "Segoe UI",

    Arial,

    sans-serif;


  transition:
    opacity .36s ease !important;

}


#srLandingLoader.is-out{

  opacity:0 !important;

  pointer-events:none !important;

}


/* =========================================================
   LOADER ART
========================================================= */

#srLandingLoader .sr-loader-art{

  position:absolute;


  left:50%;

  top:50%;


  width:
    760px;


  height:
    450px;


  transform:
    translate(-50%,-50%);


  opacity:
    .13;


  filter:
    blur(1.8px);

}


#srLandingLoader .sr-loader-thumb{

  position:absolute;


  width:
    150px;


  aspect-ratio:
    4 / 3;


  overflow:hidden;


  border:
    5px solid
    rgba(255,255,255,.9);


  border-radius:
    22px;


  box-shadow:
    0 20px 50px
    rgba(19,88,160,.16);


  animation:
    srLoaderFloat
    4.8s
    ease-in-out
    infinite;

}


#srLandingLoader .sr-loader-thumb img{

  width:100%;

  height:100%;


  object-fit:
    cover;

}


#srLandingLoader .sr-lt1{

  left:0;

  top:38px;


  transform:
    rotate(-8deg);

}


#srLandingLoader .sr-lt2{

  right:0;

  top:18px;


  transform:
    rotate(8deg);


  animation-delay:
    -1s;

}


#srLandingLoader .sr-lt3{

  left:74px;

  bottom:8px;


  transform:
    rotate(5deg);


  animation-delay:
    -2s;

}


#srLandingLoader .sr-lt4{

  right:72px;

  bottom:5px;


  transform:
    rotate(-7deg);


  animation-delay:
    -3s;

}


@keyframes srLoaderFloat{

  0%,
  100%{

    translate:
      0 0;

  }


  50%{

    translate:
      0 -14px;

  }

}


/* =========================================================
   LOADER CONTENT
========================================================= */

#srLandingLoader .sr-loader-card{

  position:relative;


  z-index:2;


  width:
    min(
      530px,
      88vw
    );


  padding:
    30px;


  text-align:center;

}


#srLandingLoader .sr-loader-tag{

  display:inline-flex;


  align-items:center;


  padding:
    8px 13px;


  color:
    #0965d7;


  background:
    #eaf4ff;


  border:
    1px solid
    #d5e9ff;


  border-radius:
    999px;


  font-size:
    11px;


  font-weight:
    900;


  letter-spacing:
    .13em;

}


#srLandingLoader .sr-loader-title{

  margin:
    18px 0 8px;


  color:
    #10233f;


  font-size:
    clamp(
      38px,
      8vw,
      64px
    );


  line-height:
    .94;


  letter-spacing:
    -.045em;


  font-weight:
    950;

}


#srLandingLoader .sr-loader-title span{

  background:
    linear-gradient(
      90deg,
      #0968e8,
      #238cff,
      #71beff
    );


  -webkit-background-clip:
    text;


  background-clip:
    text;


  color:
    transparent;

}


#srLandingLoader .sr-loader-sub{

  color:
    #73869c;


  font-size:
    13px;


  letter-spacing:
    .14em;


  text-transform:
    uppercase;

}


#srLandingLoader .sr-loader-track{

  height:
    10px;


  margin:
    28px auto 10px;


  padding:
    2px;


  overflow:hidden;


  background:
    #e1edf8;


  border-radius:
    999px;

}


#srLandingLoader #srLoadBar{

  width:
    0%;


  height:
    100%;


  border-radius:
    999px;


  background:
    linear-gradient(
      90deg,
      #0863d9,
      #238cff,
      #71beff
    );


  box-shadow:
    0 0 20px
    rgba(35,140,255,.27);


  transition:
    width .16s ease;

}


#srLandingLoader .sr-loader-meta{

  display:flex;


  align-items:center;


  justify-content:
    space-between;


  color:
    #8ca0b7;


  font-size:
    11px;

}


/* =========================================================
   HEADER
========================================================= */

#srLandingPage .sr-header{

  position:sticky;


  top:0;


  z-index:100;


  width:100%;


  background:
    rgba(255,255,255,.96);


  border-bottom:
    1px solid
    var(--line);


  backdrop-filter:
    blur(18px);


  -webkit-backdrop-filter:
    blur(18px);


  box-shadow:
    0 4px 18px
    rgba(15,63,115,.035);

}


#srLandingPage .sr-header-inner{

  min-height:
    72px;


  display:flex;


  align-items:center;


  justify-content:
    space-between;


  gap:
    18px;

}


#srLandingPage .sr-logo{

  min-width:0;


  display:flex;


  align-items:center;

}


#srLandingPage .sr-logo img{

  width:auto;


  height:
    48px;


  max-width:
    180px;


  object-fit:
    contain;

}


#srLandingPage .sr-logo-fallback{

  display:none;


  flex-direction:
    column;


  justify-content:center;


  color:
    #0b3d78;


  line-height:
    1;

}


#srLandingPage .sr-logo-fallback b{

  font-size:
    21px;


  font-weight:
    950;


  letter-spacing:
    -.03em;

}


#srLandingPage .sr-logo-fallback small{

  margin-top:
    4px;


  color:
    #71869d;


  font-size:
    7px;


  font-weight:
    900;


  letter-spacing:
    .14em;

}


#srLandingPage .sr-header-actions{

  display:flex;


  align-items:center;


  gap:
    9px;

}


/* =========================================================
   BUTTONS
========================================================= */

#srLandingPage .sr-btn{

  min-height:
    44px;


  padding:
    0 20px;


  display:inline-flex;


  align-items:center;


  justify-content:center;


  border:
    1px solid
    transparent;


  border-radius:
    12px;


  font-size:
    14px;


  font-weight:
    900;


  line-height:
    1;


  transition:

    transform .18s ease,

    box-shadow .18s ease;

}


#srLandingPage .sr-btn:hover{

  transform:
    translateY(-1px);

}


#srLandingPage .sr-btn-primary{

  color:
    #ffffff;


  background:
    linear-gradient(
      135deg,
      #075fd5,
      #1685f5
    );


  box-shadow:
    0 10px 24px
    rgba(9,104,232,.20);

}


#srLandingPage .sr-btn-outline{

  color:
    #155394;


  background:
    #ffffff;


  border-color:
    #cddff0;

}


/* =========================================================
   HERO
========================================================= */

#srLandingPage .sr-hero{

  background:

    radial-gradient(
      circle at 10% 4%,
      rgba(35,140,255,.12),
      transparent 32%
    ),

    radial-gradient(
      circle at 92% 8%,
      rgba(113,190,255,.15),
      transparent 34%
    ),

    linear-gradient(
      180deg,
      #ffffff 0%,
      #f6fbff 100%
    );


  border-bottom:
    1px solid
    #e4eef8;

}


#srLandingPage .sr-hero-inner{

  display:grid;


  grid-template-columns:

    minmax(
      0,
      .9fr
    )

    minmax(
      520px,
      1.1fr
    );


  align-items:center;


  gap:
    48px;


  padding:
    48px 0 42px;

}


#srLandingPage .sr-hero-copy{

  position:relative;

}


#srLandingPage .sr-eyebrow{

  display:inline-flex;


  align-items:center;


  gap:
    8px;


  color:
    #1768c9;


  font-size:
    12px;


  font-weight:
    900;


  letter-spacing:
    .09em;

}


#srLandingPage .sr-eyebrow span{

  width:
    8px;


  height:
    8px;


  border-radius:
    50%;


  background:
    #238cff;


  box-shadow:
    0 0 0 5px
    rgba(35,140,255,.10);

}


#srLandingPage .sr-hero h1{

  margin:
    14px 0 16px;


  color:
    #10233f;


  font-size:
    clamp(
      48px,
      6vw,
      78px
    );


  line-height:
    .94;


  letter-spacing:
    -.055em;


  font-weight:
    950;

}


#srLandingPage .sr-hero h1 em{

  font-style:
    normal;


  background:
    linear-gradient(
      90deg,
      #075fd5,
      #238cff,
      #71beff
    );


  -webkit-background-clip:
    text;


  background-clip:
    text;


  color:
    transparent;

}


#srLandingPage .sr-hero-copy > p{

  max-width:
    570px;


  margin:
    0;


  color:
    #66798f;


  font-size:
    17px;


  line-height:
    1.6;

}


#srLandingPage .sr-hero-tags{

  display:flex;


  flex-wrap:wrap;


  gap:
    8px;


  margin-top:
    20px;

}


#srLandingPage .sr-hero-tags span{

  min-height:
    30px;


  padding:
    0 11px;


  display:inline-flex;


  align-items:center;


  color:
    #326797;


  background:
    rgba(255,255,255,.78);


  border:
    1px solid
    #d8e8f7;


  border-radius:
    999px;


  font-size:
    9px;


  font-weight:
    850;


  letter-spacing:
    .055em;


  white-space:
    nowrap;

}


#srLandingPage .sr-responsible{

  display:flex;


  align-items:center;


  gap:
    7px;


  margin-top:
    17px;


  color:
    #94a4b7;


  font-size:
    10px;


  line-height:
    1.4;

}


#srLandingPage .sr-responsible::before{

  content:"";


  width:
    5px;


  height:
    5px;


  flex:
    0 0 5px;


  border-radius:
    50%;


  background:
    #2c8fff;

}


/* =========================================================
   HERO GAME ART
========================================================= */

#srLandingPage .sr-hero-games{

  position:relative;


  min-height:
    390px;

}


#srLandingPage .sr-hero-game{

  position:absolute;


  overflow:hidden;


  background:
    #ffffff;


  border:
    6px solid
    rgba(255,255,255,.94);


  border-radius:
    22px;


  box-shadow:
    0 22px 50px
    rgba(25,80,140,.16);

}


#srLandingPage .sr-hero-game img{

  width:100%;

  height:100%;


  object-fit:
    cover;

}


#srLandingPage .sr-hg1{

  width:
    300px;


  height:
    225px;


  left:
    22px;


  top:
    20px;


  transform:
    rotate(-5deg);

}


#srLandingPage .sr-hg2{

  width:
    310px;


  height:
    232px;


  right:
    2px;


  top:
    4px;


  transform:
    rotate(5deg);

}


#srLandingPage .sr-hg3{

  width:
    292px;


  height:
    219px;


  left:
    92px;


  bottom:
    0;


  transform:
    rotate(3deg);

}


#srLandingPage .sr-hg4{

  width:
    258px;


  height:
    194px;


  right:
    32px;


  bottom:
    10px;


  transform:
    rotate(-4deg);

}


#srLandingPage .sr-hero-badge{

  position:absolute;


  z-index:8;


  left:
    50%;


  top:
    50%;


  transform:
    translate(-50%,-50%);


  min-width:
    170px;


  padding:
    14px 18px;


  text-align:center;


  background:
    rgba(255,255,255,.97);


  border:
    1px solid
    #d8e7f5;


  border-radius:
    999px;


  box-shadow:
    0 16px 34px
    rgba(25,80,140,.18);

}


#srLandingPage .sr-hero-badge strong{

  display:block;


  color:
    #0863da;


  font-size:
    22px;


  line-height:
    1;

}


#srLandingPage .sr-hero-badge span{

  display:block;


  margin-top:
    4px;


  color:
    #64788f;


  font-size:
    9px;


  font-weight:
    900;


  letter-spacing:
    .12em;

}


/* =========================================================
   SEARCH
========================================================= */

#srLandingPage .sr-quick{

  padding:
    24px 0 4px;


  background:
    #ffffff;

}


#srLandingPage .sr-search-row{

  display:grid;


  grid-template-columns:
    1fr auto;


  align-items:center;


  gap:
    12px;

}


#srLandingPage .sr-search{

  height:
    50px;


  padding:
    0 15px;


  display:flex;


  align-items:center;


  gap:
    10px;


  background:
    #ffffff;


  border:
    1px solid
    #d6e5f3;


  border-radius:
    14px;


  box-shadow:
    0 8px 24px
    rgba(24,82,145,.05);

}


#srLandingPage .sr-search svg{

  width:
    18px;


  height:
    18px;


  flex:
    0 0 auto;


  stroke:
    #6f8299;

}


#srLandingPage .sr-search input{

  width:
    100%;


  border:
    0;


  outline:
    0;


  color:
    #1d2b3c;


  background:
    transparent;


  font-size:
    14px;

}


#srLandingPage .sr-chips{

  display:flex;


  gap:
    8px;


  overflow-x:auto;


  overflow-y:hidden;


  padding:
    12px 0 8px;


  scrollbar-width:
    none;


  touch-action:
    pan-x;

}


#srLandingPage .sr-chips::-webkit-scrollbar{

  display:none;

}


#srLandingPage .sr-chip{

  padding:
    10px 14px;


  white-space:
    nowrap;


  color:
    #52677f;


  background:
    #ffffff;


  border:
    1px solid
    #d9e7f4;


  border-radius:
    999px;


  font-size:
    12px;


  font-weight:
    850;

}


#srLandingPage .sr-chip.is-active{

  color:
    #ffffff;


  border-color:
    #0864db;


  background:
    linear-gradient(
      135deg,
      #075fd5,
      #238cff
    );

}


/* =========================================================
   GAME SECTIONS
========================================================= */

#srLandingPage .sr-games-area{

  position:relative;


  width:100%;


  height:auto;


  overflow:visible;


  padding:
    12px 0 70px;


  background:
    #ffffff;


  touch-action:
    pan-y;

}


#srLandingPage .sr-game-section{

  position:relative;


  height:auto;


  overflow:visible;


  padding:
    24px 0 12px;


  scroll-margin-top:
    92px;

}


#srLandingPage .sr-section-head{

  margin-bottom:
    13px;


  display:flex;


  align-items:flex-end;


  justify-content:
    space-between;


  gap:
    18px;

}


#srLandingPage .sr-section-head h2{

  margin:
    0 0 4px;


  color:
    #17273a;


  font-size:
    21px;


  font-weight:
    900;


  letter-spacing:
    -.025em;

}


#srLandingPage .sr-section-head p{

  margin:
    0;


  color:
    #8798ac;


  font-size:
    12px;

}


/* =========================================================
   ARROWS
========================================================= */

#srLandingPage .sr-carousel-controls{

  display:flex;


  gap:
    7px;

}


#srLandingPage .sr-arrow{

  width:
    38px;


  height:
    38px;


  padding:
    0;


  display:grid;


  place-items:center;


  color:
    #20568f;


  background:
    #ffffff;


  border:
    1px solid
    #d6e5f2;


  border-radius:
    50%;


  font-size:
    23px;


  line-height:
    1;

}


/* =========================================================
   CAROUSEL
========================================================= */

#srLandingPage .sr-carousel{

  display:grid;


  grid-auto-flow:
    column;


  grid-auto-columns:
    calc(
      (100% - 60px) / 6
    );


  gap:
    12px;


  width:100%;


  overflow-x:auto;


  overflow-y:hidden;


  padding:
    2px 1px 14px;


  scroll-snap-type:
    x proximity;


  scroll-behavior:
    smooth;


  scrollbar-width:
    none;


  -webkit-overflow-scrolling:
    touch;


  touch-action:
    pan-x pan-y;

}


#srLandingPage .sr-carousel::-webkit-scrollbar{

  display:none;

}


/* =========================================================
   GAME CARD
========================================================= */

#srLandingPage .sr-game-card{

  position:relative;


  min-width:
    0;


  overflow:hidden;


  scroll-snap-align:
    start;


  background:
    #ffffff;


  border:
    1px solid
    #e1ecf6;


  border-radius:
    15px;


  transition:

    transform .18s ease,

    box-shadow .18s ease,

    border-color .18s ease;

}


#srLandingPage .sr-game-card:hover{

  transform:
    translateY(-4px);


  border-color:
    #c5ddef;


  box-shadow:
    0 14px 35px
    rgba(29,89,155,.13);

}


#srLandingPage .sr-game-link{

  display:block;

}


#srLandingPage .sr-game-image{

  position:relative;


  overflow:hidden;


  aspect-ratio:
    4 / 3;


  background:
    #eef5fb;

}


#srLandingPage .sr-game-image img{

  width:
    100%;


  height:
    100%;


  object-fit:
    cover;


  transition:
    transform .3s ease;

}


#srLandingPage .sr-game-card:hover .sr-game-image img{

  transform:
    scale(1.035);

}


#srLandingPage .sr-game-hover{

  position:absolute;


  inset:0;


  padding:
    12px;


  display:flex;


  align-items:flex-end;


  justify-content:center;


  opacity:
    0;


  background:

    linear-gradient(

      to top,

      rgba(7,36,73,.72),

      transparent 58%

    );


  transition:
    opacity .18s ease;

}


#srLandingPage .sr-game-hover span{

  width:
    100%;


  min-height:
    38px;


  display:grid;


  place-items:center;


  color:
    #075fd5;


  background:
    #ffffff;


  border-radius:
    10px;


  font-size:
    12px;


  font-weight:
    950;

}


#srLandingPage .sr-game-card:hover .sr-game-hover{

  opacity:
    1;

}


#srLandingPage .sr-game-info{

  padding:
    10px 11px 11px;

}


#srLandingPage .sr-game-name{

  overflow:hidden;


  white-space:
    nowrap;


  text-overflow:
    ellipsis;


  color:
    #22344a;


  font-size:
    12px;


  font-weight:
    900;


  line-height:
    1.32;

}


#srLandingPage .sr-game-meta{

  margin-top:
    4px;


  display:flex;


  align-items:center;


  justify-content:
    space-between;


  gap:
    6px;


  color:
    #8a9caf;


  font-size:
    10px;

}


#srLandingPage .sr-game-meta i{

  width:
    6px;


  height:
    6px;


  margin-right:
    4px;


  display:inline-block;


  border-radius:
    50%;


  background:
    #238cff;

}


/* =========================================================
   RANK
========================================================= */

#srLandingPage .sr-rank{

  position:absolute;


  z-index:
    5;


  left:
    8px;


  top:
    8px;


  min-width:
    28px;


  height:
    28px;


  padding:
    0 7px;


  display:grid;


  place-items:center;


  color:
    #ffffff;


  background:
    rgba(16,35,63,.82);


  border-radius:
    9px;


  font-size:
    11px;


  font-weight:
    950;

}


#srLandingPage .sr-rank1{

  background:
    linear-gradient(
      135deg,
      #075fd5,
      #238cff
    );

}


#srLandingPage .sr-rank2{

  background:
    linear-gradient(
      135deg,
      #4b86c5,
      #79b1eb
    );

}


#srLandingPage .sr-rank3{

  background:
    linear-gradient(
      135deg,
      #2d5d91,
      #5e8fc4
    );

}


/* =========================================================
   TRUST
========================================================= */

#srLandingPage .sr-trust{

  margin-top:
    30px;


  display:grid;


  grid-template-columns:
    repeat(
      3,
      1fr
    );


  overflow:hidden;


  background:
    linear-gradient(
      135deg,
      #fbfdff,
      #eff7ff
    );


  border:
    1px solid
    #dbe8f5;


  border-radius:
    20px;

}


#srLandingPage .sr-trust > div{

  padding:
    18px 20px;


  border-right:
    1px solid
    #dbe8f5;

}


#srLandingPage .sr-trust > div:last-child{

  border-right:
    0;

}


#srLandingPage .sr-trust strong{

  display:block;


  margin-bottom:
    3px;


  color:
    #16375e;


  font-size:
    13px;

}


#srLandingPage .sr-trust span{

  color:
    #7c8ea3;


  font-size:
    11px;


  line-height:
    1.45;

}


/* =========================================================
   FOOTER
========================================================= */

#srLandingPage .sr-footer{

  position:relative;


  width:100%;


  height:auto;


  overflow:visible;


  background:
    #f8fbff;


  border-top:
    1px solid
    #e2edf6;

}


#srLandingPage .sr-footer-inner{

  padding:
    24px 0;


  display:flex;


  align-items:center;


  justify-content:
    space-between;


  flex-wrap:
    wrap;


  gap:
    14px;


  color:
    #8797aa;


  font-size:
    11px;


  line-height:
    1.5;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1080px){


  #srLandingPage .sr-hero-inner{

    grid-template-columns:
      1fr;


    gap:
      4px;


    padding-top:
      42px;

  }


  #srLandingPage .sr-hero-copy{

    text-align:
      center;

  }


  #srLandingPage .sr-hero-copy > p{

    margin:
      0 auto;

  }


  #srLandingPage .sr-hero-tags{

    justify-content:
      center;

  }


  #srLandingPage .sr-responsible{

    justify-content:
      center;

  }


  #srLandingPage .sr-hero-games{

    width:
      min(
        700px,
        100%
      );


    margin:
      0 auto;

  }


  #srLandingPage .sr-carousel{

    grid-auto-columns:
      calc(
        (100% - 36px) / 4
      );

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){


  #srLandingPage .sr-wrap{

    width:
      min(
        calc(100% - 24px),
        1240px
      );

  }


  #srLandingPage .sr-header-inner{

    min-height:
      62px;


    gap:
      8px;

  }


  #srLandingPage .sr-logo img{

    height:
      36px;


    max-width:
      125px;

  }


  #srLandingPage .sr-header-actions{

    gap:
      6px;

  }


  #srLandingPage .sr-header-actions .sr-btn{

    min-height:
      35px;


    padding:
      0 11px;


    border-radius:
      9px;


    font-size:
      10px;

  }


  #srLandingPage .sr-hero-inner{

    padding:
      28px 0 12px;

  }


  #srLandingPage .sr-hero h1{

    font-size:
      clamp(
        42px,
        13vw,
        62px
      );

  }


  #srLandingPage .sr-hero-copy > p{

    font-size:
      14px;

  }


  #srLandingPage .sr-hero-tags{

    justify-content:
      center;


    gap:
      6px;


    margin-top:
      16px;

  }


  #srLandingPage .sr-hero-tags span{

    min-height:
      28px;


    padding:
      0 9px;


    font-size:
      8px;

  }


  #srLandingPage .sr-responsible{

    justify-content:
      center;


    margin-top:
      14px;


    font-size:
      9px;

  }


  #srLandingPage .sr-hero-games{

    min-height:
      280px;


    margin-top:
      -8px;


    transform:
      scale(.84);

  }


  #srLandingPage .sr-hg1{

    width:
      225px;


    height:
      169px;


    left:
      3px;

  }


  #srLandingPage .sr-hg2{

    width:
      230px;


    height:
      173px;


    right:
      0;

  }


  #srLandingPage .sr-hg3{

    width:
      220px;


    height:
      165px;


    left:
      40px;

  }


  #srLandingPage .sr-hg4{

    width:
      196px;


    height:
      147px;


    right:
      18px;

  }


  #srLandingPage .sr-search-row{

    grid-template-columns:
      1fr;

  }


  #srLandingPage .sr-full-lobby{

    display:none;

  }


  #srLandingPage .sr-carousel{

    grid-auto-columns:
      46%;


    gap:
      10px;


    margin-right:
      -12px;


    padding-right:
      12px;


    /*
     * 手机可左右拖，同时不锁死上下滚动
     */

    touch-action:
      pan-x pan-y;

  }


  #srLandingPage .sr-carousel-controls{

    display:none;

  }


  #srLandingPage .sr-game-hover{

    display:none;

  }


  #srLandingPage .sr-trust{

    grid-template-columns:
      1fr;

  }


  #srLandingPage .sr-trust > div{

    border-right:
      0;


    border-bottom:
      1px solid
      #dbe8f5;

  }


  #srLandingPage .sr-trust > div:last-child{

    border-bottom:
      0;

  }


  #srLandingPage .sr-footer-inner{

    flex-direction:
      column;


    align-items:
      flex-start;

  }


  #srLandingLoader .sr-loader-art{

    width:
      540px;


    height:
      430px;

  }


  #srLandingLoader .sr-loader-thumb{

    width:
      112px;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:430px){


  #srLandingPage .sr-carousel{

    grid-auto-columns:
      63%;

  }


  #srLandingPage .sr-hero-games{

    width:
      114%;


    min-height:
      260px;


    margin-left:
      -7%;


    transform:
      scale(.76);

  }


  #srLandingPage .sr-header-actions .sr-btn{

    padding:
      0 9px;


    font-size:
      9px;

  }

}

/* =========================================================
   V6 AUTO LOOP - seamless deck reset without visible animation
   Keeps the original manual desktop arrows and mobile swipe.
========================================================= */
#srLandingPage .sr-carousel.sr-loop-instant {
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}