.hero-copy{
  transform: translateY(58px) !important;
}

.featured-card--stack{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-stack{
  position: relative;
  width: 100%;
  max-width: 410px;
  height: 620px;
  margin-left: auto;
  margin-right: 20px;
  transform: translateY(34px) translateX(-120px);
  z-index: 3;
}

.hero-stack__deck{
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1200px;
}

.hero-stack__card{
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: #0b0b12;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.34);
  transition:
    transform .95s cubic-bezier(.22,.61,.36,1),
    opacity .75s ease,
    filter .75s ease;
}

.hero-stack__card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-stack__card--front{
  z-index: 3;
  transform: translate3d(0,0,0) scale(1);
  opacity: 1;
}

.hero-stack__card--middle{
  z-index: 2;
  transform: translate3d(-20px,18px,0) scale(.935);
  opacity: .52;
  filter: brightness(.8);
}

.hero-stack__card--back{
  z-index: 1;
  transform: translate3d(-38px,36px,0) scale(.87);
  opacity: .26;
  filter: brightness(.62);
}

.hero-stack__card.is-exit{
  transform: translate3d(70px,-10px,0) scale(.96);
  opacity: 0;
  filter: brightness(.8);
}

.hero-stack__overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(7,7,12,.16) 20%, rgba(7,7,12,.82) 66%, rgba(7,7,12,.97) 100%);
  color: #fff;
  z-index: 4;
}

.hero-stack__tag{
  display: inline-flex;
  padding: .46rem .82rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  margin-bottom: .7rem;
  font-size: .84rem;
}

.hero-stack__overlay h3{
  margin: 0 0 .35rem;
  font-size: 2rem;
  line-height: 1.04;
}

.hero-stack__overlay p{
  margin: 0;
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}

.hero-stack__price-row{
  margin-top: .95rem;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.hero-stack__price-row small{
  display: block;
  color: rgba(255,255,255,.6);
  margin-bottom: .12rem;
}

.hero-stack__price-row strong{
  font-size: 1.5rem;
  color: #fff;
}

.hero-stack__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  min-height: 42px;
  padding: .85rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg,#8f53ff,#b07aff);
}

@media (max-width: 1200px){
  .hero-stack{
    transform: translateY(34px) translateX(-70px);
  }
}

@media (max-width: 1100px){
  .hero-stack{
    max-width: 355px;
    height: 560px;
    transform: translateY(34px) translateX(-30px);
  }
}

@media (max-width: 900px){
  .hero-copy{
    transform: none !important;
  }

  .hero-stack{
    max-width: 340px;
    height: 520px;
    margin: 0 auto;
    transform: none;
  }
}


/* =========================================================
   ADAPTACIÓN MÓVIL PREMIUM
   Solo móvil/tablet. No cambia escritorio.
   ========================================================= */
html, body{
  overflow-x: hidden;
}

img{
  max-width: 100%;
  height: auto;
}

@media (max-width: 1100px){
  .topbar{
    width: calc(100vw - 1.4rem) !important;
    padding: .9rem 1rem !important;
    gap: .75rem !important;
  }

  .page-shell{
    width: 100%;
    overflow-x: hidden;
  }

  .hero-section,
  .hero-section--custom{
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
    min-height: auto !important;
    padding-bottom: 40px !important;
  }

  .hero-copy,
  .hero-copy--custom{
    max-width: 100% !important;
  }

  .featured-card,
  .hero-stack{
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .games-grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 1rem !important;
  }

  .profile-grid,
  .product-detail{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px){
  body{
    font-size: 15px;
  }

  .topbar{
    position: sticky !important;
    top: 8px !important;
    width: calc(100vw - 1rem) !important;
    padding: .85rem .85rem !important;
    border-radius: 18px !important;
    gap: .65rem !important;
  }

  .brand-copy span{
    font-size: .62rem !important;
    letter-spacing: .15em !important;
  }

  .brand-copy strong{
    font-size: 1rem !important;
  }

  .main-nav{
    display: none !important;
  }

  .top-actions{
    gap: .5rem !important;
  }

  .icon-btn,
  .user-trigger{
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .cart-dropdown,
  .user-dropdown{
    min-width: min(300px, calc(100vw - 1.2rem)) !important;
    right: 0 !important;
    border-radius: 18px !important;
  }

  .hero-section,
  .hero-section--custom{
    padding-top: .5rem !important;
    padding-bottom: 28px !important;
    gap: 1.1rem !important;
  }

  .hero-copy,
  .hero-copy--custom{
    transform: none !important;
    text-align: left !important;
    padding-inline: .1rem !important;
  }

  .hero-badge{
    font-size: .72rem !important;
    padding: .5rem .75rem !important;
  }

  .hero-text h1{
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: .98 !important;
  }

  .hero-text p{
    font-size: .96rem !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  .hero-actions{
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem !important;
  }

  .hero-actions .btn-primary,
  .hero-actions .btn-secondary{
    width: 100% !important;
    justify-content: center !important;
    min-height: 46px !important;
  }

  .hero-points{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .55rem !important;
  }

  .hero-points span{
    font-size: .72rem !important;
  }

  .featured-card{
    min-height: 480px !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .featured-image,
  .featured-card img{
    height: 100% !important;
    object-fit: cover !important;
  }

  .featured-info,
  .featured-copy,
  .featured-overlay{
    padding: 1rem !important;
  }

  .featured-copy h3,
  .featured-overlay h3{
    font-size: 1.6rem !important;
  }

  .featured-copy p,
  .featured-overlay p{
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }

  .featured-price-row,
  .featured-card__footer{
    flex-wrap: wrap !important;
    gap: .6rem !important;
  }

  .hero-stack{
    width: min(100%, 340px) !important;
    height: 520px !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  .hero-stack__deck{
    height: 520px !important;
  }

  .hero-stack__overlay{
    padding: 1rem !important;
  }

  .hero-stack__overlay h3{
    font-size: 1.5rem !important;
  }

  .hero-stack__overlay p{
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }

  .hero-stack__price-row{
    gap: .75rem !important;
  }

  .hero-stack__price-row strong{
    font-size: 1.25rem !important;
  }

  .hero-stack__cta{
    width: 100% !important;
    min-height: 44px !important;
  }

  .catalog-section{
    margin-top: 18px !important;
    padding-top: .5rem !important;
  }

  .catalog-head h2{
    font-size: 1.5rem !important;
  }

  .games-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: .85rem !important;
  }

  .game-card{
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .game-thumb{
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }

  .game-thumb img{
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
  }

  .game-body{
    padding: .9rem !important;
  }

  .game-platform{
    font-size: .68rem !important;
  }

  .game-body h3{
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .game-body p{
    font-size: .82rem !important;
    line-height: 1.45 !important;
    min-height: auto !important;
  }

  .game-meta{
    gap: .35rem !important;
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .new-price{
    font-size: 1.05rem !important;
  }

  .store-card-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .55rem !important;
  }

  .store-card-actions .mini-btn,
  .store-card-actions .mini-btn--primary{
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
  }

  .profile-page{
    width: calc(100vw - 1rem) !important;
    padding: .75rem 0 2rem !important;
  }

  .profile-card,
  .profile-header-card{
    border-radius: 22px !important;
    padding: 1.1rem !important;
  }

  .profile-header-card h1{
    font-size: clamp(1.9rem, 9vw, 2.8rem) !important;
  }

  .auth-grid{
    grid-template-columns: 1fr !important;
  }

  .cart-item{
    grid-template-columns: 1fr !important;
    gap: .85rem !important;
    padding: .9rem !important;
  }

  .cart-item img{
    width: 100% !important;
    height: 230px !important;
    border-radius: 16px !important;
  }

  .order-item{
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .order-item__right{
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .chat-shell__head{
    flex-direction: column !important;
    gap: .85rem !important;
    padding: 1rem !important;
  }

  .chat-shell__head h1{
    font-size: 1.6rem !important;
  }

  .chat-messages{scroll-behavior:smooth;
    min-height: 320px !important;
    padding: .9rem !important;
  }

  .chat-message{
    max-width: 100% !important;
  }
}

@media (max-width: 640px){
  .topbar{
    width: calc(100vw - .8rem) !important;
    padding: .78rem .78rem !important;
  }

  .hero-text h1{
    font-size: clamp(1.8rem, 10vw, 2.55rem) !important;
  }

  .hero-actions{
    grid-template-columns: 1fr !important;
  }

  .games-grid{
    grid-template-columns: 1fr !important;
  }

  .game-body{
    padding: 1rem !important;
  }

  .hero-stack{
    width: min(100%, 320px) !important;
    height: 490px !important;
  }

  .hero-stack__deck{
    height: 490px !important;
  }

  .featured-card{
    min-height: 430px !important;
  }

  .cart-dropdown,
  .user-dropdown{
    min-width: calc(100vw - 1rem) !important;
    right: -4px !important;
  }
}



/* ==== Barra superior corrida ==== */
.promo-marquee{
  width: min(1720px, calc(100vw - 2.7rem));
  margin: 0 auto .7rem;
  padding: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background:
    linear-gradient(180deg, rgba(7,7,12,.88), rgba(5,5,9,.82));
  position: relative;
  z-index: 24;
}

.promo-marquee__track{
  display: inline-flex;
  align-items: center;
  gap: 2.1rem;
  white-space: nowrap;
  min-width: max-content;
  padding: .88rem 0;
  color: rgba(255,255,255,.88);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: ifosMarqueeScroll 28s linear infinite;
}

.promo-marquee__track span{
  flex: 0 0 auto;
}

.promo-marquee__track span:nth-child(2n){
  color: #14e6ff;
  font-weight: 800;
}

@keyframes ifosMarqueeScroll{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}

@media (hover:hover){
  .promo-marquee:hover .promo-marquee__track{
    animation-play-state: paused;
  }
}

@media (max-width: 900px){
  .promo-marquee{
    width: calc(100vw - 1rem);
    margin: 0 auto .5rem;
  }

  .promo-marquee__track{
    gap: 1.25rem;
    padding: .72rem 0;
    font-size: .82rem;
    letter-spacing: .1em;
    animation-duration: 22s;
  }
}

@media (max-width: 640px){
  .promo-marquee{
    width: calc(100vw - .8rem);
  }

  .promo-marquee__track{
    font-size: .76rem;
    gap: 1rem;
    padding: .66rem 0;
    animation-duration: 18s;
  }
}


/* ==== Unión barra corrida + topbar ==== */
.promo-marquee{
  margin: 0 auto 0 !important;
  border-bottom: none !important;
}

.topbar{
  top: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
}



/* =========================================================
   ORDEN FINAL TOPBAR + MARQUEE
   topbar arriba, barra corrida debajo como en referencia
   ========================================================= */
.promo-marquee{
  width: min(1720px, calc(100vw - 2.7rem));
  margin: 0 auto .95rem !important;
  padding: 0;
  overflow: hidden;
  background: transparent;
  position: relative;
  z-index: 19;
}

.promo-marquee__track{
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;
  min-width: max-content;
  padding: .95rem 0 .5rem;
  color: rgba(255,255,255,.88);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: ifosMarqueeScroll 28s linear infinite;
}

.promo-marquee__track span{
  flex: 0 0 auto;
}

.promo-marquee__track span:nth-child(2n){
  color: #11dcff;
  font-weight: 800;
}

.topbar{
  margin: 0 auto 0 !important;
  top: 10px !important;
}

@keyframes ifosMarqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

@media (hover:hover){
  .promo-marquee:hover .promo-marquee__track{
    animation-play-state: paused;
  }
}

@media (max-width: 1100px){
  .promo-marquee{
    width: calc(100vw - 1.4rem);
    margin: 0 auto .7rem !important;
  }

  .promo-marquee__track{
    gap: 1.4rem;
    padding: .8rem 0 .35rem;
    font-size: .88rem;
    animation-duration: 24s;
  }
}

@media (max-width: 900px){
  .topbar{
    top: 8px !important;
  }

  .promo-marquee{
    width: calc(100vw - 1rem);
    margin: 0 auto .55rem !important;
  }

  .promo-marquee__track{
    gap: 1rem;
    padding: .66rem 0 .2rem;
    font-size: .74rem;
    letter-spacing: .1em;
    animation-duration: 20s;
  }
}

@media (max-width: 640px){
  .promo-marquee{
    width: calc(100vw - .8rem);
    margin: 0 auto .45rem !important;
  }

  .promo-marquee__track{
    font-size: .7rem;
    gap: .85rem;
    padding: .6rem 0 .12rem;
    animation-duration: 18s;
  }
}


/* ==== Ajuste fino topbar y marquee ==== */
.topbar{
  top: 2px !important;
}

.promo-marquee{
  margin: .55rem auto .95rem !important;
}

@media (max-width: 900px){
  .topbar{
    top: 2px !important;
  }

  .promo-marquee{
    margin: .42rem auto .7rem !important;
  }
}

@media (max-width: 640px){
  .promo-marquee{
    margin: .35rem auto .55rem !important;
  }
}


/* ==== Subir bloque hero completo ==== */
.hero-section,
.hero-section--custom{
  transform: translateY(-28px) !important;
}

@media (max-width: 900px){
  .hero-section,
  .hero-section--custom{
    transform: translateY(-14px) !important;
  }
}

@media (max-width: 640px){
  .hero-section,
  .hero-section--custom{
    transform: translateY(-8px) !important;
  }
}


.ifos-select{
  width:100%;
  padding:1rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  outline:none;
}
.ifos-select option{
  color:#111;
}


.featured-card,
.featured-card--stack,
.hero-stack{
  position: relative;
}

.featured-admin-trigger{
  position:absolute;
  top:14px;
  right:14px;
  width:46px;
  height:46px;
  border:none;
  border-radius:15px;
  background:linear-gradient(90deg,#8f53ff,#b07aff);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 16px 32px rgba(143,83,255,.28);
  cursor:pointer;
  z-index:12;
  transition:transform .18s ease, box-shadow .18s ease;
}
.featured-admin-trigger:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 40px rgba(143,83,255,.34);
}
.featured-admin-panel{
  position:absolute;
  top:68px;
  right:14px;
  width:min(360px, calc(100vw - 2rem));
  padding:1rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(13,13,18,.98), rgba(9,9,14,.95));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 60px rgba(0,0,0,.38);
  z-index:13;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .22s ease, visibility .2s ease;
}
.featured-admin-panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.featured-admin-panel__form{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.featured-admin-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.featured-admin-panel__head strong{
  color:#fff;
  font-size:1rem;
}
.featured-admin-panel__close{
  width:38px;
  height:38px;
  border:none;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}
.featured-admin-panel label{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  color:#fff;
  font-weight:600;
}
.games-search-empty{
  margin-top:1rem;
  padding:1rem 1.1rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
}

@media (max-width:900px){
  .featured-admin-trigger{
    top:10px;
    right:10px;
    width:42px;
    height:42px;
  }
  .featured-admin-panel{
    top:58px;
    right:10px;
  }
}


.catalog-hero{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.catalog-search-box{
  width:min(420px,100%);
}
.catalog-search-input{
  width:100%;
  padding:1rem 1.05rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  outline:none;
}
@media (max-width: 900px){
  .catalog-hero{
    flex-direction:column;
    align-items:stretch;
  }
}


.reviews-hero{
  margin-bottom:1rem;
}
.reviews-hero h1{
  color:#fff;
  font-size:clamp(2rem,5vw,3.4rem);
  margin:.2rem 0 .5rem;
}
.reviews-hero p{
  color:rgba(255,255,255,.72);
  max-width:760px;
  line-height:1.7;
}
.rating-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.rating-pill{
  position:relative;
}
.rating-pill input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.rating-pill span{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.72rem .95rem;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.rating-pill span:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}
.rating-pill input:checked + span{
  background:linear-gradient(90deg,#8f53ff,#b07aff);
}
.reviews-ranking,
.reviews-feed{
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.reviews-ranking__item,
.review-card{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:1rem;
  border-radius:20px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.reviews-ranking__item img{
  width:74px;
  height:74px;
  border-radius:16px;
  object-fit:cover;
}
.reviews-ranking__body{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.reviews-ranking__body strong,
.review-card__head strong{
  color:#fff;
}
.reviews-ranking__body small,
.review-card__head small,
.review-card p{
  color:rgba(255,255,255,.68);
}
.reviews-stars,
.review-stars-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#ffd666;
}
.review-card{
  flex-direction:column;
}
.review-card__head{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.review-stars-badge{
  padding:.5rem .8rem;
  border-radius:999px;
  background:rgba(255,214,102,.08);
  border:1px solid rgba(255,214,102,.16);
}
@media (max-width:900px){
  .review-card__head{
    flex-direction:column;
    align-items:flex-start;
  }
}



.roulette-hero{
  margin-bottom:1rem;
}
.roulette-hero h1{
  color:#fff;
  font-size:clamp(2rem,5vw,3.4rem);
  margin:.2rem 0 .5rem;
}
.roulette-hero p{
  color:rgba(255,255,255,.72);
  max-width:760px;
  line-height:1.7;
}
.roulette-shell{
  display:grid;
  grid-template-columns:minmax(320px, 520px) minmax(280px, 1fr);
  gap:1.2rem;
  align-items:start;
}
.roulette-wheel-wrap{
  position:relative;
  display:grid;
  place-items:center;
  min-height:520px;
}
.roulette-pointer{
  position:absolute;
  top:8px;
  z-index:3;
  color:#ffd666;
  font-size:3rem;
}
.roulette-wheel{
  width:420px;
  height:420px;
  border-radius:50%;
  position:relative;
  border:10px solid rgba(255,255,255,.08);
  box-shadow:0 28px 70px rgba(0,0,0,.34), inset 0 0 0 8px rgba(255,255,255,.04);
  overflow:hidden;
  transition:transform 5.2s cubic-bezier(.12,.8,.18,1);
  background:
    conic-gradient(
      #8f53ff 0deg 45deg,
      #151522 45deg 90deg,
      #b07aff 90deg 135deg,
      #1b1b2a 135deg 180deg,
      #8f53ff 180deg 225deg,
      #151522 225deg 270deg,
      #b07aff 270deg 315deg,
      #1b1b2a 315deg 360deg
    );
}
.roulette-segment{
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  height:2px;
  transform-origin:0 0;
}
.roulette-segment span{
  position:absolute;
  left:56%;
  top:-12px;
  transform-origin:0 0;
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
}
.segment-0{ transform: rotate(22.5deg); }
.segment-0 span{ transform: rotate(-22.5deg); }
.segment-1{ transform: rotate(67.5deg); }
.segment-1 span{ transform: rotate(-67.5deg); }
.segment-2{ transform: rotate(112.5deg); }
.segment-2 span{ transform: rotate(-112.5deg); }
.segment-3{ transform: rotate(157.5deg); }
.segment-3 span{ transform: rotate(-157.5deg); }
.segment-4{ transform: rotate(202.5deg); }
.segment-4 span{ transform: rotate(-202.5deg); }
.segment-5{ transform: rotate(247.5deg); }
.segment-5 span{ transform: rotate(-247.5deg); }
.segment-6{ transform: rotate(292.5deg); }
.segment-6 span{ transform: rotate(-292.5deg); }
.segment-7{ transform: rotate(337.5deg); }
.segment-7 span{ transform: rotate(-337.5deg); }
.roulette-side{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.roulette-result{
  margin-top:1rem;
  padding:1rem;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
}
.roulette-result strong{
  display:block;
  margin-bottom:.35rem;
}
.roulette-steps{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  padding:0;
  margin:0;
  list-style:none;
}
.roulette-steps li{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:rgba(255,255,255,.82);
}
.roulette-steps i{
  color:#ffd666;
}
@media (max-width: 900px){
  .roulette-shell{
    grid-template-columns:1fr;
  }
  .roulette-wheel{
    width:min(88vw, 360px);
    height:min(88vw, 360px);
  }
  .roulette-wheel-wrap{
    min-height:420px;
  }
}



.roulette-note{
  margin-top:.9rem;
  padding:.9rem 1rem;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.74);
}
.roulette-wheel{
  width:420px;
  height:420px;
  border-radius:50%;
  position:relative;
  border:10px solid rgba(255,255,255,.08);
  box-shadow:0 28px 70px rgba(0,0,0,.34), inset 0 0 0 8px rgba(255,255,255,.04);
  overflow:hidden;
  transition:transform 5.2s cubic-bezier(.12,.8,.18,1);
  background:conic-gradient(
      #8f53ff 0deg 45deg,
      #161626 45deg 90deg,
      #9f70ff 90deg 135deg,
      #161626 135deg 180deg,
      #8f53ff 180deg 225deg,
      #161626 225deg 270deg,
      #9f70ff 270deg 315deg,
      #161626 315deg 360deg
    );
}
.roulette-wheel::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.0) 0 44deg, rgba(255,255,255,.18) 44deg 45deg);
  border-radius:50%;
}
.roulette-wheel__center{
  position:absolute;
  inset:50%;
  width:24px;
  height:24px;
  margin:-12px 0 0 -12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 8px rgba(255,255,255,.1);
  z-index:2;
}
.roulette-segment{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform-origin:0 0;
  z-index:3;
}
.roulette-segment span{
  position:absolute;
  left:0;
  top:0;
  width:110px;
  margin-left:-55px;
  text-align:center;
  color:#fff;
  font-weight:900;
  letter-spacing:.03em;
  font-size:1.35rem;
  text-shadow:0 2px 10px rgba(0,0,0,.28);
}
@media (max-width: 900px){
  .roulette-wheel{
    width:min(88vw, 360px);
    height:min(88vw, 360px);
  }
  .roulette-segment span{
    font-size:1.1rem;
    width:90px;
    margin-left:-45px;
    transform: rotate(90deg) translateY(-122px) !important;
  }
}


.reviews-site-summary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
}
.reviews-site-score,
.reviews-site-count{
  padding:1rem;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.reviews-site-score strong,
.reviews-site-count strong{
  display:block;
  color:#fff;
  font-size:2rem;
  line-height:1;
  margin-bottom:.35rem;
}
.reviews-site-score span,
.reviews-site-count span{
  color:rgba(255,255,255,.74);
}
@media (max-width:900px){
  .reviews-site-summary{
    grid-template-columns:1fr;
  }
}


/* Ajuste fino topbar + avatar perfil */
.topbar{
  transform: translateX(-10px);
}
.user-trigger{
  position: relative;
  overflow: hidden;
}
.user-trigger img,
.user-trigger__fallback{
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.user-trigger img{
  object-fit: cover;
  display: block;
}
.user-trigger__fallback{
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(143,83,255,.95), rgba(176,122,255,.85));
}
@media (max-width: 900px){
  .topbar{
    transform: translateX(-4px);
  }
}


.product-detail{
  display:grid;
  grid-template-columns:minmax(320px, 520px) minmax(280px, 1fr);
  gap:1.2rem;
  align-items:start;
}
.product-detail__image{
  border-radius:28px;
  overflow:hidden;
  background:#0b0b11;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 32px 70px rgba(0,0,0,.34);
}
.product-detail__image img{
  width:100%;
  display:block;
  aspect-ratio:4/5;
  object-fit:cover;
}
.product-detail__content{
  padding:1rem 0;
}
.product-detail__content h1{
  color:#fff;
  font-size:clamp(2rem, 5vw, 3.6rem);
  line-height:1;
  margin:.35rem 0 .8rem;
}
.product-detail__content p{
  color:rgba(255,255,255,.76);
  line-height:1.7;
}
.product-price-box{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.8rem;
  margin-top:1rem;
}
.product-price-box > div{
  padding:1rem;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.product-price-box small{
  display:block;
  color:rgba(255,255,255,.62);
  margin-bottom:.2rem;
}
.product-price-box strong{
  color:#fff;
  font-size:1.15rem;
}
@media (max-width:900px){
  .product-detail{
    grid-template-columns:1fr;
  }
  .product-price-box{
    grid-template-columns:1fr;
  }
}


.checkout-coupon-form{
  margin-top:1rem;
}
.checkout-coupon-row{
  display:flex;
  gap:.7rem;
  align-items:center;
}
.checkout-coupon-row input{
  flex:1;
  min-width:0;
}
@media (max-width:900px){
  .checkout-coupon-row{
    flex-direction:column;
    align-items:stretch;
  }
}


.user-trigger{
  position: relative;
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  flex-shrink: 0;
}
.user-trigger__avatar{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  background:transparent;
}
.user-trigger__fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  border-radius:inherit;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg, rgba(143,83,255,.95), rgba(176,122,255,.85));
}


.checkout-pay-btn[disabled]{
  opacity:.78;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:0 10px 24px rgba(143,83,255,.20) !important;
}


@keyframes chatMessagePop{
  0%{
    opacity:0;
    transform:translateY(14px) scale(.98);
    filter:blur(4px);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1.01);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

.chat-messages{
  scroll-behavior:smooth;
}

.chat-message{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.chat-message.is-new{
  animation:chatMessagePop .42s ease both;
}

.chat-message.is-new .chat-message__bubble{
  box-shadow:0 0 0 1px rgba(176,122,255,.16), 0 18px 34px rgba(0,0,0,.16);
}

.chat-message:hover{
  transform:translateY(-1px);
}

.chat-form button[disabled]{
  opacity:.72;
  cursor:not-allowed;
}


.coupon-admin-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.coupon-admin-item{
  padding:1rem;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.coupon-admin-item__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}
.coupon-admin-item__top strong{
  color:#fff;
  font-size:1.15rem;
}
.coupon-admin-item__top small{
  display:block;
  margin-top:.25rem;
  color:rgba(255,255,255,.65);
}
.coupon-admin-form{
  margin-bottom:.8rem;
}
.coupon-admin-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1rem;
}
.coupon-admin-actions__buttons{
  display:flex;
  gap:.75rem;
}
@media (max-width: 768px){
  .coupon-admin-actions{
    flex-direction:column;
    align-items:flex-start;
  }
  .coupon-admin-actions__buttons{
    width:100%;
  }
}