/*
   GEAR APEX - best page premium layer.
   Scoped to body.best-page. No new image or video assets.
*/

body.best-page{
  --best-cyan:#38d5ff;
  --best-violet:#a855f7;
  --best-gold:#fbbf24;
  --best-rose:#fb7185;
  --best-panel:rgba(9,10,22,.88);
  --best-panel-2:rgba(16,14,32,.82);
  overflow-x:hidden;
}

body.best-page #gax-buddy,
body.best-page #sfx-toggle,
body.best-page #pwa-install-btn{
  display:none !important;
}

body.best-page main{
  position:relative;
}

body.best-page main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(56,213,255,.05), transparent 18%, rgba(168,85,247,.05) 68%, transparent),
    repeating-linear-gradient(90deg, rgba(56,213,255,.045) 0 1px, transparent 1px 72px);
  mask-image:linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 8%, #000 88%, transparent);
}

body.best-page #best-body{
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.22));
}

body.best-page .best-hero{
  position:relative;
  overflow:hidden;
  text-align:left;
  margin:clamp(.85rem,1.5vw,1.35rem) 0 clamp(1rem,1.8vw,1.4rem) !important;
  padding:clamp(1.1rem,2vw,1.55rem) clamp(1rem,2.5vw,1.9rem) !important;
  border:1px solid rgba(56,213,255,.28);
  border-radius:12px;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    radial-gradient(circle at 12% 8%, rgba(56,213,255,.16), transparent 36%),
    radial-gradient(circle at 94% 90%, rgba(168,85,247,.24), transparent 44%),
    var(--best-panel);
  box-shadow:
    0 20px 50px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 34px rgba(56,213,255,.08);
}

body.best-page .best-hero::before,
body.best-page .best-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

body.best-page .best-hero::before{
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, var(--best-cyan), var(--best-violet), var(--best-gold), transparent 86%);
  box-shadow:0 0 18px rgba(56,213,255,.42);
}

body.best-page .best-hero::after{
  right:1rem;
  top:.85rem;
  width:min(210px,34vw);
  aspect-ratio:1;
  border:1px solid rgba(56,213,255,.22);
  border-radius:50%;
  opacity:.42;
  background:
    linear-gradient(90deg, transparent 49%, rgba(56,213,255,.24) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(168,85,247,.18) 50%, transparent 51%);
  box-shadow:inset 0 0 22px rgba(168,85,247,.14), 0 0 28px rgba(56,213,255,.10);
}

body.best-page .best-sys-status{
  font-family:var(--gx-disp, 'Oxanium', 'Inter', system-ui, sans-serif);
  margin-bottom:.6rem !important;
}

body.best-page .best-hero h1{
  font-family:var(--gx-disp, 'Oxanium', 'Inter', system-ui, sans-serif);
  line-height:1.1;
}

body.best-page .best-hero h1::after{
  left:0 !important;
  right:auto !important;
  width:min(360px,72%);
}

body.best-page .best-hero p{
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:760px !important;
}

body.best-page .best-hero-stats{
  justify-content:flex-start !important;
}

body.best-page .best-hero-stats .bh-chip{
  border-radius:8px !important;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:linear-gradient(180deg, rgba(56,213,255,.12), rgba(168,85,247,.08)) !important;
}

body.best-page .best-sec{
  position:relative;
  margin-bottom:1.35rem !important;
  padding:1rem !important;
  border:1px solid rgba(168,85,247,.24);
  border-radius:12px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    radial-gradient(circle at 0 0, rgba(56,213,255,.10), transparent 28%),
    radial-gradient(circle at 100% 100%, rgba(168,85,247,.14), transparent 34%),
    rgba(8,9,20,.72);
  box-shadow:0 16px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  content-visibility:auto;
  contain-intrinsic-size:760px;
}

body.best-page .best-sec::before{
  content:"ARSENAL RANK";
  position:absolute;
  right:1rem;
  top:.78rem;
  color:rgba(56,213,255,.58);
  font-family:var(--gx-disp, 'Oxanium', 'Inter', system-ui, sans-serif);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.18em;
}

body.best-page .best-head{
  min-width:0;
  padding-right:8.5rem;
  margin-bottom:.24rem !important;
}

body.best-page .best-head .bh-icon{
  width:38px !important;
  height:38px !important;
  border-radius:8px !important;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}

body.best-page .best-head h2{
  font-family:var(--gx-disp, 'Oxanium', 'Inter', system-ui, sans-serif);
  min-width:0;
}

body.best-page .best-sub{
  margin-bottom:.95rem !important;
  padding-left:calc(38px + .75rem) !important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

body.best-page .best-divider{
  margin:0 0 1.25rem !important;
  opacity:.72;
}

body.best-page .best-top3{
  display:grid !important;
  gap:.78rem !important;
  padding-top:1.15rem !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.13fr) minmax(0,1fr) !important;
}

body.best-page .best-rank-2{
  grid-column:1 !important;
  grid-row:1 !important;
}

body.best-page .best-rank-1{
  grid-column:2 !important;
  grid-row:1 !important;
  transform:translateY(-10px) !important;
  z-index:3 !important;
}

body.best-page .best-rank-3{
  grid-column:3 !important;
  grid-row:1 !important;
}

body.best-page .best-rank-1::after{
  content:"ACE PICK" !important;
  top:-1.35rem !important;
  padding:.22rem .7rem;
  border:1px solid rgba(251,191,36,.55);
  border-radius:999px;
  color:#1d1303;
  font-family:var(--gx-disp, 'Oxanium', 'Inter', system-ui, sans-serif);
  font-size:.68rem !important;
  font-weight:900;
  letter-spacing:.16em;
  background:linear-gradient(135deg,#fef08a,#fbbf24,#fb923c);
  box-shadow:0 8px 20px rgba(251,191,36,.28), 0 0 18px rgba(251,191,36,.22);
}

body.best-page .b-card{
  isolation:isolate;
  border-radius:10px !important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  border-color:rgba(56,213,255,.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    linear-gradient(145deg, rgba(8,10,24,.92), rgba(20,14,36,.84)) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .16s ease, border-color .18s ease, box-shadow .22s ease, filter .18s ease !important;
}

body.best-page .b-card:hover{
  transform:translateY(-5px) scale(1.01) !important;
  border-color:rgba(56,213,255,.58) !important;
  box-shadow:0 20px 42px rgba(0,0,0,.48), 0 0 24px rgba(56,213,255,.14), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.best-page .b-card:active{
  transform:translateY(-1px) scale(.992) !important;
  filter:brightness(1.08);
}

body.best-page .b-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.11;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.25) 0 1px, transparent 1px 7px);
  mix-blend-mode:screen;
}

body.best-page .b-card-img{
  min-height:0;
  background:
    radial-gradient(90% 80% at 50% 22%, rgba(56,213,255,.18), transparent 52%),
    radial-gradient(80% 70% at 50% 78%, rgba(168,85,247,.16), transparent 60%),
    rgba(6,8,18,.42) !important;
}

body.best-page .best-rank-1 .b-card-img{
  height:188px !important;
}

body.best-page .best-rank-2 .b-card-img,
body.best-page .best-rank-3 .b-card-img{
  height:154px !important;
}

body.best-page .best-rank-1 .b-card-img::before{
  content:"BEST PICK / NO.1" !important;
  color:#100d05 !important;
  font-family:var(--gx-disp, 'Oxanium', 'Inter', system-ui, sans-serif);
}

body.best-page .b-card-img img{
  object-fit:contain;
  max-height:calc(100% - 18px);
}

body.best-page .best-rank-1 .b-card-img img{
  width:76% !important;
  max-height:150px !important;
}

body.best-page .best-rank-2 .b-card-img img,
body.best-page .best-rank-3 .b-card-img img{
  width:66% !important;
  max-height:116px !important;
}

body.best-page .b-card-body{
  padding:.82rem .9rem .95rem !important;
}

body.best-page .b-brand{
  font-family:var(--gx-disp, 'Oxanium', 'Inter', system-ui, sans-serif);
}

body.best-page .b-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.75em;
}

body.best-page .best-rank-1 .b-name{
  font-size:1.08rem !important;
}

body.best-page .b-reason{
  display:-webkit-box !important;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:.45rem 0 .65rem !important;
  font-style:normal !important;
}

body.best-page .b-reason-mini{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.best-page .b-price{
  border-radius:8px !important;
  margin-bottom:.55rem !important;
}

body.best-page .b-specs{
  max-height:3.6rem;
  overflow:hidden;
  margin-bottom:.72rem !important;
}

body.best-page .b-specs .b-spec{
  border-radius:7px !important;
}

body.best-page .b-buy{
  min-height:40px;
  border-radius:8px !important;
  background:linear-gradient(135deg, rgba(251,146,60,.20), rgba(124,58,237,.16)) !important;
  border:1px solid rgba(251,191,36,.44) !important;
  box-shadow:0 10px 24px rgba(251,146,60,.16), inset 0 1px 0 rgba(255,255,255,.18) !important;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  letter-spacing:.02em;
}

body.best-page .b-buy:active,
body.best-page .fav-btn:active{
  transform:translateY(1px) scale(.97) !important;
}

body.best-page .b-rankbadge,
body.best-page .b-tier,
body.best-page .fav-btn{
  border-radius:8px !important;
}

body.best-page main > section[style]{
  position:relative;
}

@media (max-width:1200px){
  body.best-page .best-top3{
    grid-template-columns:1fr !important;
    padding-top:1rem !important;
  }

  body.best-page .best-rank-1,
  body.best-page .best-rank-2,
  body.best-page .best-rank-3{
    grid-column:auto !important;
    grid-row:auto !important;
  }
}

@media (max-width:920px){
  body.best-page #best-char-mio,
  body.best-page #best-char-hina,
  body.best-page .vn-char{
    display:inline-flex !important;
    position:absolute !important;
    top:76px !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    width:calc((100vw - 36px) / 2) !important;
    height:clamp(142px, 19vw, 180px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    vertical-align:top;
    pointer-events:none !important;
    z-index:2 !important;
    border:1px solid rgba(56,213,255,.28);
    border-radius:12px;
    background:rgba(7,9,20,.72);
  }

  body.best-page #best-char-mio{
    left:12px !important;
  }

  body.best-page #best-char-hina{
    right:12px !important;
  }

  body.best-page .vn-char .vn-say,
  body.best-page .vn-char .vn-tag{
    display:none !important;
  }

  body.best-page .vn-char .vn-art{
    width:100% !important;
    height:100% !important;
    display:block !important;
    margin:0 !important;
  }

  body.best-page .vn-char .vn-art video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 50% !important;
  }

  body.best-page .vn-char .char-frame-overlay{
    inset:0 !important;
  }

  body.best-page #best-body{
    margin-left:0 !important;
    margin-right:0 !important;
    padding:166px 16px 3rem !important;
  }

  body.best-page .best-hero{
    margin-top:.85rem !important;
  }
}

@media (max-width:680px){
  body.best-page #to-top{
    display:none !important;
  }

  body.best-page .best-hero{
    padding:1rem .9rem !important;
  }

  body.best-page .best-hero::after{
    width:140px;
    opacity:.28;
    right:-32px;
    top:-28px;
  }

  body.best-page .best-hero h1{
    font-size:1.64rem !important;
  }

  body.best-page .best-hero p{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.86rem !important;
    line-height:1.62 !important;
  }

  body.best-page .best-hero-stats{
    display:grid !important;
    grid-template-columns:1fr;
    gap:.42rem !important;
    width:100%;
  }

  body.best-page .best-hero-stats .bh-chip{
    width:100%;
    justify-content:space-between;
    min-height:34px;
  }

  body.best-page .best-sec{
    padding:.78rem !important;
    margin-bottom:.9rem !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    content-visibility:visible !important;
    contain-intrinsic-size:auto !important;
  }

  body.best-page .best-sec::before{
    display:none;
  }

  body.best-page .best-head{
    padding-right:0;
  }

  body.best-page .best-head .bh-icon{
    width:34px !important;
    height:34px !important;
    font-size:1rem !important;
  }

  body.best-page .best-head h2{
    font-size:1.04rem !important;
    line-height:1.28 !important;
  }

  body.best-page .best-sub{
    padding-left:0 !important;
    font-size:.78rem !important;
    margin-bottom:.65rem !important;
  }

  body.best-page .best-top3{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:.52rem !important;
    padding-top:.72rem !important;
  }

  body.best-page .best-rank-1{
    grid-column:1 / -1 !important;
  }

  body.best-page .best-rank-2,
  body.best-page .best-rank-3{
    grid-column:auto !important;
  }

  body.best-page .best-rank-1::after{
    top:-1.08rem !important;
    font-size:.58rem !important;
  }

  body.best-page .b-card{
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  }

  body.best-page .best-rank-1 .b-card{
    display:grid !important;
    grid-template-columns:minmax(116px,40%) minmax(0,1fr);
    min-height:202px;
  }

  body.best-page .best-rank-1 .b-card-img{
    height:100% !important;
    min-height:202px;
    border-right:1px solid rgba(251,191,36,.22);
    border-bottom:0 !important;
  }

  body.best-page .best-rank-2 .b-card-img,
  body.best-page .best-rank-3 .b-card-img{
    height:112px !important;
  }

  body.best-page .best-rank-1 .b-card-img img{
    width:78% !important;
    max-height:154px;
  }

  body.best-page .best-rank-2 .b-card-img img,
  body.best-page .best-rank-3 .b-card-img img{
    width:64% !important;
    max-height:90px !important;
  }

  body.best-page .b-card-body{
    padding:.7rem .74rem .78rem !important;
  }

  body.best-page .best-rank-2 .b-card-body,
  body.best-page .best-rank-3 .b-card-body{
    padding:.5rem .56rem .58rem !important;
  }

  body.best-page .b-brand{
    font-size:.66rem !important;
  }

  body.best-page .b-name,
  body.best-page .best-rank-1 .b-name{
    font-size:.92rem !important;
    line-height:1.34 !important;
    min-height:2.46em;
    margin-bottom:.38rem !important;
  }

  body.best-page .best-rank-2 .b-brand,
  body.best-page .best-rank-3 .b-brand{
    font-size:.58rem !important;
    margin-bottom:.14rem !important;
  }

  body.best-page .best-rank-2 .b-name,
  body.best-page .best-rank-3 .b-name{
    font-size:.75rem !important;
    line-height:1.24 !important;
    min-height:2.48em;
    margin-bottom:.22rem !important;
  }

  body.best-page .b-reason{
    -webkit-line-clamp:2;
    margin:.32rem 0 .48rem !important;
    padding:.42rem .56rem !important;
    font-size:.74rem !important;
  }

  body.best-page .b-reason-mini{
    font-size:.68rem !important;
  }

  body.best-page .best-rank-2 .b-reason-mini,
  body.best-page .best-rank-3 .b-reason-mini{
    display:none !important;
  }

  body.best-page .b-price{
    font-size:.78rem !important;
    padding:.22rem .52rem !important;
  }

  body.best-page .best-rank-2 .b-price,
  body.best-page .best-rank-3 .b-price{
    font-size:.66rem !important;
    padding:.16rem .38rem !important;
    margin-bottom:.32rem !important;
  }

  body.best-page .b-specs{
    gap:.28rem !important;
    max-height:none !important;
    margin-bottom:.52rem !important;
  }

  body.best-page .b-specs .b-spec{
    font-size:.66rem !important;
    padding:.18rem .42rem !important;
  }

  body.best-page .best-rank-2 .b-specs,
  body.best-page .best-rank-3 .b-specs{
    display:none !important;
  }

  body.best-page .b-buy{
    min-height:36px;
    padding:.48rem .7rem !important;
    font-size:.74rem !important;
  }

  body.best-page .best-rank-2 .b-buy,
  body.best-page .best-rank-3 .b-buy{
    min-height:31px;
    padding:.36rem .32rem !important;
    font-size:.62rem !important;
    white-space:nowrap;
  }

  body.best-page .b-rankbadge{
    top:.62rem !important;
    left:.62rem !important;
    min-width:28px !important;
    height:28px !important;
  }

  body.best-page .b-tier{
    top:.62rem !important;
    right:.62rem !important;
  }

  body.best-page .b-card .fav-btn{
    top:2.95rem !important;
    right:.62rem !important;
  }

  body.best-page .best-rank-2 .b-rankbadge,
  body.best-page .best-rank-3 .b-rankbadge{
    top:.42rem !important;
    left:.42rem !important;
    min-width:24px !important;
    height:24px !important;
    padding:0 .42rem !important;
    font-size:.7rem !important;
  }

  body.best-page .best-rank-2 .b-rankbadge .br-no,
  body.best-page .best-rank-3 .b-rankbadge .br-no{
    font-size:.84rem !important;
  }

  body.best-page .best-rank-2 .b-tier,
  body.best-page .best-rank-3 .b-tier{
    top:.42rem !important;
    right:.42rem !important;
    font-size:.62rem !important;
    padding:.14rem .36rem !important;
  }

  body.best-page .best-rank-2 .b-card .fav-btn,
  body.best-page .best-rank-3 .b-card .fav-btn{
    top:2.2rem !important;
    right:.42rem !important;
    transform:scale(.82);
    transform-origin:top right;
  }

  body.best-page .best-rank-1 .b-rankbadge,
  body.best-page .best-rank-1 .b-tier{
    top:2.2rem !important;
  }

  body.best-page .best-rank-1 .b-card .fav-btn{
    top:4.52rem !important;
  }

  body.best-page main > section[style]{
    margin:1rem 16px 2rem !important;
    padding:0 !important;
  }
}

@media (max-width:430px){
  body.best-page .best-top3{
    grid-template-columns:1fr !important;
  }

  body.best-page .best-rank-1,
  body.best-page .best-rank-2,
  body.best-page .best-rank-3{
    grid-column:1 / -1 !important;
  }

  body.best-page .best-rank-1 .b-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
  }

  body.best-page .best-rank-1 .b-card-img{
    min-height:146px !important;
    height:146px !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(251,191,36,.22) !important;
  }

  body.best-page .best-rank-1 .b-card-img img{
    width:58% !important;
    max-height:108px !important;
  }

  body.best-page .best-rank-1 .b-card-body{
    padding:.78rem .84rem .88rem !important;
  }

  body.best-page .b-name,
  body.best-page .best-rank-1 .b-name{
    min-height:0 !important;
    font-size:.98rem !important;
    line-height:1.34 !important;
  }

  body.best-page .b-reason{
    display:block !important;
    -webkit-line-clamp:unset !important;
    overflow:visible !important;
    font-size:.72rem !important;
    line-height:1.5 !important;
  }

  body.best-page .b-specs{
    display:flex !important;
    flex-wrap:wrap !important;
    overflow:visible !important;
    max-height:none !important;
  }

  body.best-page .b-specs .b-spec{
    max-width:100%;
    min-width:0;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.25;
  }

  body.best-page .best-rank-1 .b-rankbadge,
  body.best-page .best-rank-1 .b-tier{
    top:.58rem !important;
  }

  body.best-page .best-rank-1 .b-card .fav-btn{
    top:3.02rem !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.best-page .b-card,
  body.best-page .best-hero::after,
  body.best-page main::before{
    animation:none !important;
    transition:none !important;
  }
}