:root {
  --bg: #050507;
  --bg-2: #09090d;
  --panel: rgba(255,255,255,0.045);
  --panel-2: rgba(255,255,255,0.065);
  --text: #ffffff;
  --muted: rgba(255,255,255,0.70);
  --muted-2: rgba(255,255,255,0.48);
  --purple: #7c3cff;
  --purple-2: #b57cff;
  --line: rgba(255,255,255,0.08);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at 12% 12%, rgba(124,60,255,0.17), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(181,124,255,0.12), transparent 26%),
    linear-gradient(180deg, #040406 0%, #07070a 45%, #040406 100%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #030305;
  overflow: hidden;
}

.loader-glow {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,60,255,0.22), rgba(124,60,255,0));
  filter: blur(20px);
  animation: pulseGlow 2.2s ease-in-out infinite;
}

.loader-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.loader-logo {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  letter-spacing: 0.28rem;
  text-shadow: 0 0 12px rgba(124,60,255,0.35), 0 0 42px rgba(181,124,255,0.42);
  animation: shineText 3s linear forwards;
}

.loader-logo span { color: var(--purple-2); }

.loader-status,
.loader-sub {
  margin: 0;
  color: var(--muted);
  letter-spacing: 0.10rem;
  text-transform: uppercase;
  font-size: 0.83rem;
}

.loader-status { margin-top: 1.2rem; }
.loader-sub { margin-top: 0.6rem; color: var(--muted-2); }

.page-shell {
  position: relative;
  min-height: 100vh;
  padding: 1.35rem 1.35rem 3rem;
}

.page-shell main {
  width: min(1720px, calc(100vw - 2.7rem));
  margin: 0 auto;
}

.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    radial-gradient(rgba(255,255,255,0.45) 0.5px, transparent 0.5px);
  background-size: 5px 5px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.bg-blur {
  position: fixed;
  width: 440px;
  height: 440px;
  filter: blur(95px);
  opacity: 0.34;
  pointer-events: none;
}

.blur-a { top: 20px; left: -120px; background: #6f35ff; }
.blur-b { right: -120px; top: 220px; background: #a96dff; }

.topbar {
  position: sticky;
  top: 16px;
  z-index: 20;
  width: min(1720px, calc(100vw - 2.7rem));
  transform: translateX(-20px);
  margin: 0 0 0.45rem 12px;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(180deg, rgba(5,5,9,0.9), rgba(6,6,10,0.8));
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.26);
}

.brand-block { display: flex; align-items: center; gap: 0.85rem; }





.eyebrow {
  margin: 0 0 0.2rem;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.16rem;
  font-size: 0.66rem;
}
.brand-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.08rem;
}
.brand-name span { color: var(--purple-2); }

.main-nav { display: flex; gap: 1.4rem; color: var(--muted); }
.main-nav a {
  position: relative;
  transition: color .22s ease;
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: #fff; }
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); }

.top-actions { display: flex; gap: 0.7rem; align-items: center; }
.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: #fff;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.icon-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(181,124,255,0.42);
  box-shadow: 0 0 18px rgba(124,60,255,0.18);
}
.cart-btn { position: relative; }
.cart-btn span {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--purple);
  font-size: 0.7rem;
  font-weight: 700;
}



.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(390px, 500px);
  gap: 2.6rem;
  align-items: center;
  min-height: 72vh;
  padding: 0.15rem 0 3rem;
}

.hero-copy {
  max-width: 960px;
  position: relative;
}

.hero-kicker,
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.15rem;
  padding: 0.58rem 0.9rem;
  border-radius: 999px;
  background: rgba(124,60,255,0.10);
  border: 1px solid rgba(181,124,255,0.18);
  color: #efe3ff;
  font-size: 0.83rem;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(2.9rem, 5vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero-copy h1 span {
  color: var(--purple-2);
  text-shadow: 0 0 18px rgba(181,124,255,0.18);
}

.hero-text {
  max-width: 760px;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.85;
}

.hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.7rem;
}

.primary-btn,
.secondary-btn {
  padding: 0.98rem 1.25rem;
  border-radius: 14px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.primary-btn {
  background: linear-gradient(135deg, var(--purple), var(--purple-2));
  box-shadow: 0 14px 34px rgba(124,60,255,0.26);
}
.secondary-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}
.primary-btn:hover,
.secondary-btn:hover { transform: translateY(-2px); }
.secondary-btn:hover { border-color: rgba(181,124,255,0.45); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.8rem;
  color: var(--muted-2);
  font-size: 0.9rem;
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-meta i {
  color: var(--purple-2);
  font-size: 0.55rem;
}

.hero-featured { justify-self: end; width: 100%; max-width: 430px; }
.featured-card {
  position: relative;
  min-height: 620px;
  border-radius: 2px;
  overflow: hidden;
  background: #0b0b11;
  box-shadow: 0 40px 90px rgba(0,0,0,0.52);
  transform: translateX(-50px) translateY(40px);
}
.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
.featured-overlay {

  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.18) 28%, rgba(0,0,0,0.84) 100%),
    linear-gradient(135deg, rgba(124,60,255,0.16), transparent 45%);
}
.featured-info {
  position: absolute;
  inset: auto 0 0;
  padding: 1.25rem;
}
.featured-badge {
  display: inline-flex;
  padding: 0.46rem 0.72rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.78rem;
  margin-bottom: 0.8rem;
}
.featured-copy p {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
}
.featured-copy span {
  display: block;
  margin-top: 0.25rem;
  color: rgba(255,255,255,0.72);
}
.featured-price-row {
  display: flex;
  gap: 1.2rem;
  margin-top: 1rem;
}
.featured-price-row small {
  display: block;
  color: var(--muted-2);
  margin-bottom: 0.15rem;
}
.old-price { text-decoration: line-through; color: rgba(255,255,255,0.58); }
.new-price { color: #fff; font-size: 1.2rem; }

.catalog-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.4rem;
}
.catalog-head h2 {
  margin: 0;
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  letter-spacing: -0.03em;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pill {
  padding: 0.78rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all .2s ease;
}
.pill.active,
.pill:hover {
  color: #fff;
  border-color: rgba(181,124,255,0.34);
  background: rgba(124,60,255,0.12);
}

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

.game-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 50px rgba(0,0,0,0.28);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.game-card:hover {
  transform: translateY(-7px);
  border-color: rgba(181,124,255,0.22);
  box-shadow: 0 26px 70px rgba(0,0,0,0.42);
}

.game-cover {
  position: relative;
  aspect-ratio: 0.8 / 1;
  overflow: hidden;
  background: #0b0b10;
}
.game-cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
}
.game-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.game-card:hover .game-cover img { transform: scale(1.05); }
.fc26-cover img { object-position: center; }

.game-tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: rgba(10,10,15,0.58);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}

.game-content { padding: 1rem 1rem 1.1rem; }
.game-content h3 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.game-content p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 0.9rem;
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 0.95rem;
}
.price-old {
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
}
.price-new {
  font-size: 1.08rem;
  font-weight: 700;
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(0.96); opacity: 0.68; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes shineText {
  0% { opacity: 0.45; letter-spacing: 0.22rem; }
  60% { opacity: 0.85; }
  100% { opacity: 1; letter-spacing: 0.28rem; }
}

@media (max-width: 1280px) {
  .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .topbar,
  .catalog-head,
  .hero-section {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }
  .topbar,
  .page-shell main { width: min(100%, calc(100vw - 2.7rem)); }
  .top-actions { align-self: stretch; }
  .hero-section {
    display: grid;
    gap: 1.6rem;
    min-height: auto;
    padding-top: 1.2rem;
  }
  .hero-featured { justify-self: start; max-width: 100%; }
  .featured-card { min-height: 520px; }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .page-shell { padding: 1rem 1rem 2.4rem; }
  .page-shell main,
  .topbar { width: calc(100vw - 2rem); }
  .main-nav { gap: 1rem; overflow-x: auto; padding-bottom: 0.25rem; }
  .topbar { padding: 1rem; align-items: flex-start; }
  .top-actions { width: 100%; }
  .icon-btn { width: 40px; height: 40px; }
  .games-grid { grid-template-columns: 1fr; }
  .featured-card { min-height: 460px; }
  .hero-copy h1 { font-size: clamp(2.3rem, 12vw, 3.5rem); }
}


@media (max-width: 640px) {
  .brand-mark--logo,
  
}


.brand-block{
  display:flex;
  align-items:center;
  gap:0.85rem;
  min-width:0;
}







@media (max-width: 640px){
  .brand-mark--logo,
  
  .brand-block{
    gap:0.65rem;
  }
}


.brand-block--text-only{
  display:flex;
  align-items:center;
  gap:0;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.brand-copy span{
  font-size:0.82rem;
  letter-spacing:0.28rem;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-bottom:0.28rem;
}

.brand-copy strong{
  font-size:2rem;
  line-height:1;
  letter-spacing:0.03em;
  font-weight:800;
  color:#ffffff;
}

.brand-copy strong em{
  font-style:normal;
  color:#a86cff;
}

@media (max-width: 640px){
  .brand-copy span{
    font-size:0.66rem;
    letter-spacing:0.18rem;
  }
  .brand-copy strong{
    font-size:1.55rem;
  }
}


@media (max-width: 980px){
  .hero-copy{
    margin-top: 0;
  }
  .hero-section{
    padding-top: 1.2rem !important;
  }
}


/* ===== Catálogo hover premium ===== */
.games-grid .game-card{
  cursor: pointer;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.games-grid .game-card:hover{
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 24px 54px rgba(0,0,0,0.34), 0 0 0 1px rgba(168,108,255,0.16);
  border-color: rgba(168,108,255,0.24);
}

.games-grid .game-card:hover .game-thumb img{
  transform: scale(1.045);
}

.games-grid .game-card .game-thumb img{
  transition: transform 0.42s ease;
}

.game-hover-preview{
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  pointer-events: none;
  z-index: 90;
  opacity: 0;
  transform: translate3d(18px, 18px, 0) scale(0.94);
  transition: opacity 0.18s ease, transform 0.22s ease;
  will-change: transform, opacity;
}

.game-hover-preview.is-visible{
  opacity: 1;
  transform: translate3d(18px, 18px, 0) scale(1);
}

.game-hover-preview__inner{
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(11,11,17,0.95), rgba(9,9,14,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(168,108,255,0.08);
  padding: 1rem 1rem 1.05rem;
  backdrop-filter: blur(18px);
  overflow: hidden;
  position: relative;
}

.game-hover-preview__inner::before{
  content: "";
  position: absolute;
  inset: -35% auto auto -10%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(140,95,255,0.23), transparent 68%);
  pointer-events: none;
}

.game-hover-preview__eyebrow{
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.17rem;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  margin-bottom: 0.7rem;
  position: relative;
  z-index: 1;
}

.game-hover-preview__title{
  display: block;
  font-size: 1.18rem;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.55rem;
  position: relative;
  z-index: 1;
}

.game-hover-preview__text{
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.76);
  position: relative;
  z-index: 1;
}

@media (max-width: 980px){
  .game-hover-preview{
    display: none !important;
  }
}


/* ===== Footer / bottom bar ===== */
.site-footer{
  margin-top: 3.2rem;
  padding: 0 0 1.2rem;
}

.footer-shell{
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 0.8fr;
  gap: 2rem;
  padding: 1.5rem 1.5rem 1.35rem;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(8,8,13,0.92), rgba(6,6,10,0.96));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
}

.footer-shell::before{
  content: "";
  position: absolute;
  left: -8%;
  bottom: -40%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(151,92,255,0.18), transparent 68%);
  pointer-events: none;
}

.footer-brand{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.footer-brand__logo{
  min-width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(150,90,255,0.12));
  box-shadow:
    0 0 24px rgba(176,122,255,0.22),
    inset 0 0 20px rgba(255,255,255,0.03);
  text-shadow:
    0 0 8px rgba(255,255,255,0.7),
    0 0 18px rgba(176,122,255,0.42);
}

.footer-brand__copy span{
  display: block;
  font-size: 1.12rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.35rem;
}

.footer-brand__copy p{
  margin: 0 0 0.45rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
  max-width: 340px;
}

.footer-brand__copy small{
  color: rgba(255,255,255,0.5);
  font-size: 0.88rem;
}

.footer-links{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.footer-col h4,
.footer-social h4{
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  color: #fff;
}

.footer-col a{
  display: block;
  margin: 0 0 0.62rem;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  transition: color 0.22s ease, transform 0.22s ease;
}

.footer-col a:hover{
  color: #bb93ff;
  transform: translateX(4px);
}

.footer-social{
  position: relative;
  z-index: 1;
}

.footer-social__icons{
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.footer-social__icons a{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.02);
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.footer-social__icons a:hover{
  transform: translateY(-4px);
  border-color: rgba(187,147,255,0.34);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.22),
    0 0 18px rgba(176,122,255,0.18);
}

.footer-social__icons i{
  font-size: 1.08rem;
}

@media (max-width: 1180px){
  .footer-shell{
    grid-template-columns: 1fr;
  }
  .footer-links{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .footer-shell{
    padding: 1.2rem;
    border-radius: 22px;
  }
  .footer-links{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .footer-brand{
    flex-direction: column;
  }
}


/* Ajuste footer marca */
.footer-brand{
  align-items: center;
  padding-top: 0.9rem;
}

.footer-brand__logo--img{
  min-width: auto;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: grid;
  place-items: center;
  margin-top: 0.2rem;
}

.footer-brand__logo--img img{
  height: 62px;
  width: auto;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.28))
    drop-shadow(0 0 18px rgba(176,122,255,0.22));
}

.footer-brand__copy{
  padding-top: 0.45rem;
}

@media (max-width: 640px){
  .footer-brand{
    align-items: flex-start;
    padding-top: 0.35rem;
  }
  .footer-brand__copy{
    padding-top: 0;
  }
  .footer-brand__logo--img img{
    height: 54px;
  }
}


/* ===== Auth + user system ===== */
.login-btn{
  display:inline-flex;
  align-items:center;
  gap:0.65rem;
  padding:0.92rem 1.15rem;
  border-radius:16px;
  text-decoration:none;
  color:#fff;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.login-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(168,108,255,0.26);
  box-shadow:0 10px 28px rgba(0,0,0,.22), 0 0 16px rgba(168,108,255,0.12);
}

.user-menu{
  position:relative;
}
.user-trigger{
  width:48px;
  height:48px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(20,20,28,.95), rgba(13,13,18,.92));
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  cursor:pointer;
  font-weight:800;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.user-trigger img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.user-trigger:hover,
.user-menu.is-open .user-trigger{
  transform:translateY(-2px);
  border-color:rgba(168,108,255,0.26);
  box-shadow:0 10px 28px rgba(0,0,0,.22), 0 0 18px rgba(168,108,255,0.12);
}
.user-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:250px;
  padding:0.9rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(13,13,18,.96), rgba(9,9,14,.94));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .22s ease;
  z-index:80;
}
.user-menu.is-open .user-dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.user-dropdown__head{
  padding-bottom:0.85rem;
  margin-bottom:0.85rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.user-dropdown__head strong{
  display:block;
  color:#fff;
  margin-bottom:0.25rem;
}
.user-dropdown__head small{
  color:rgba(255,255,255,.55);
}
.user-dropdown a{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.8rem .85rem;
  border-radius:14px;
  text-decoration:none;
  color:rgba(255,255,255,.82);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.user-dropdown a:hover{
  background:rgba(255,255,255,0.04);
  color:#fff;
  transform:translateX(4px);
}

.page-auth .page-shell{
  min-height:100vh;
}
.auth-page,
.profile-page{
  width:min(1320px, calc(100vw - 2.7rem));
  margin:0 auto;
}
.auth-page{
  display:grid;
  grid-template-columns:1fr 560px;
  gap:1.7rem;
  padding:1rem 0 3rem;
}
.auth-hero-card,
.auth-panel,
.profile-card,
.profile-header-card{
  border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(10,10,15,.82), rgba(8,8,12,.94));
  border-radius:28px;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
}
.auth-hero-card{
  padding:2rem;
  min-height:520px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.auth-kicker,
.profile-kicker{
  display:inline-block;
  font-size:.8rem;
  letter-spacing:.2rem;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:1rem;
}
.auth-hero-card h1,
.profile-header-card h1{
  margin:0 0 .75rem;
  color:#fff;
  font-size:clamp(2.4rem, 5vw, 4rem);
  line-height:.95;
}
.auth-hero-card p,
.profile-header-card p{
  color:rgba(255,255,255,.72);
  max-width:600px;
  line-height:1.65;
}
.auth-hero-card__items{
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:1.4rem;
}
.auth-hero-card__items span{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.06);
}
.auth-panel,
.profile-card{
  padding:1.5rem;
}
.auth-tabs{
  display:flex;
  gap:.75rem;
  margin-bottom:1.25rem;
}
.auth-tabs a{
  flex:1;
  text-align:center;
  text-decoration:none;
  padding:.92rem 1rem;
  border-radius:16px;
  color:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.02);
  transition:all .22s ease;
}
.auth-tabs a.is-active,
.auth-tabs a:hover{
  color:#fff;
  border-color:rgba(168,108,255,0.22);
  box-shadow:0 0 18px rgba(168,108,255,0.10);
}
.auth-form,
.profile-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.auth-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.auth-form label,
.profile-form label{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  color:#fff;
  font-weight:600;
}
.auth-form input,
.profile-form input{
  width:100%;
  padding:1rem 1rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  outline:none;
}
.auth-form input:focus,
.profile-form input:focus{
  border-color:rgba(168,108,255,.36);
  box-shadow:0 0 0 4px rgba(168,108,255,.08);
}
.auth-form input:disabled,
.profile-form input:disabled{
  color:rgba(255,255,255,.45);
}
.auth-submit{
  padding:1rem 1.15rem;
  border:none;
  border-radius:16px;
  background:linear-gradient(90deg, #8f53ff, #b07aff);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 14px 35px rgba(143,83,255,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.auth-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 38px rgba(143,83,255,.34);
}
.auth-note{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1rem 1.05rem;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.76);
}
.auth-note code{
  color:#d3bcff;
}
.flash{
  padding:1rem 1.1rem;
  border-radius:16px;
  margin-bottom:1rem;
  font-weight:600;
}
.flash--success{
  background:rgba(50,205,132,.12);
  color:#b9f5d4;
  border:1px solid rgba(50,205,132,.20);
}
.flash--error{
  background:rgba(255,82,82,.11);
  color:#ffd0d0;
  border:1px solid rgba(255,82,82,.20);
}
.profile-page{
  padding:1rem 0 3rem;
}
.profile-header-card{
  padding:1.6rem;
  display:flex;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1.2rem;
}
.profile-header-card__avatar{
  width:86px;
  height:86px;
  border-radius:24px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(90deg, #8f53ff, #b07aff);
  color:#fff;
  font-size:1.4rem;
  font-weight:800;
  flex-shrink:0;
}
.profile-header-card__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.profile-grid{
  display:grid;
  grid-template-columns:1.2fr .85fr;
  gap:1.2rem;
}
.profile-card__head h2{
  margin:0 0 .4rem;
  color:#fff;
}
.profile-card__head p{
  margin:0 0 1rem;
  color:rgba(255,255,255,.68);
}
.profile-meta{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
}
.profile-meta span{
  display:flex;
  align-items:center;
  gap:.7rem;
}

@media (max-width: 1100px){
  .auth-page,
  .profile-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 640px){
  .auth-page,
  .profile-page{
    width:calc(100vw - 2rem);
  }
  .auth-grid{
    grid-template-columns:1fr;
  }
  .profile-header-card{
    flex-direction:column;
    align-items:flex-start;
  }
  .top-actions{
    flex-wrap:wrap;
  }
}

/* ==== Sistema añadido sobre v12 base ==== */
textarea{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;resize:vertical}
.page-auth .page-shell{min-height:100vh}
.profile-page{width:min(1320px,calc(100vw - 2.7rem));margin:0 auto;padding:1rem 0 3rem}
.profile-header-card,.profile-card{border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(10,10,15,.82),rgba(8,8,12,.94));border-radius:28px;box-shadow:0 18px 48px rgba(0,0,0,.28)}
.profile-header-card{padding:1.6rem;display:flex;align-items:center;gap:1.2rem;margin-bottom:1.2rem}
.profile-kicker{display:inline-block;font-size:.8rem;letter-spacing:.2rem;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:1rem}
.profile-header-card h1{margin:0 0 .75rem;color:#fff;font-size:clamp(2.4rem,5vw,4rem);line-height:.95}
.profile-header-card p{color:rgba(255,255,255,.72);max-width:700px;line-height:1.65}
.profile-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.2rem}
.profile-card{padding:1.5rem}
.profile-card__head h2{margin:0 0 .4rem;color:#fff}
.profile-card__head p{margin:0 0 1rem;color:rgba(255,255,255,.68)}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.profile-form{display:flex;flex-direction:column;gap:1rem}
.profile-form label{display:flex;flex-direction:column;gap:.55rem;color:#fff;font-weight:600}
.profile-form input{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}
.auth-submit{padding:1rem 1.15rem;border:none;border-radius:16px;background:linear-gradient(90deg,#8f53ff,#b07aff);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 14px 35px rgba(143,83,255,.28)}
.flash{padding:1rem 1.1rem;border-radius:16px;margin-bottom:1rem;font-weight:600}
.flash--success{background:rgba(50,205,132,.12);color:#b9f5d4;border:1px solid rgba(50,205,132,.20)}
.flash--error{background:rgba(255,82,82,.11);color:#ffd0d0;border:1px solid rgba(255,82,82,.20)}
.icon-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);position:relative}
.top-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:linear-gradient(90deg,#8f53ff,#b07aff);color:#fff;font-size:.72rem;display:grid;place-items:center;font-weight:800}
.admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1rem}
.admin-stat{padding:1.2rem 1.3rem;border-radius:22px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(10,10,15,.82),rgba(8,8,12,.94))}
.admin-stat strong{display:block;font-size:1.8rem;color:#fff}
.admin-stat span{color:rgba(255,255,255,.68)}
.admin-game-list,.cart-list,.order-list{display:flex;flex-direction:column;gap:.85rem}
.admin-game-item,.cart-item,.order-item{display:flex;gap:.9rem;align-items:center;padding:.85rem;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.admin-game-item__thumb,.cart-item img{width:76px;height:76px;border-radius:16px;overflow:hidden;flex-shrink:0}
.admin-game-item__thumb img,.cart-item img{width:100%;height:100%;object-fit:cover}
.admin-game-item strong,.cart-item strong,.order-item strong{display:block;color:#fff}
.admin-game-item small,.cart-item small,.order-item small{display:block;color:rgba(255,255,255,.58);margin:.2rem 0}
.admin-game-item span,.cart-item span,.order-item span{color:#d8c2ff;font-weight:700}
.game-actions-row{margin-top:.9rem;display:flex;gap:.6rem;flex-wrap:wrap}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;padding:.8rem .95rem;border-radius:14px;background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.06)}
.mini-btn--primary{background:linear-gradient(90deg,#8f53ff,#b07aff);border:none}
.checkout-summary{display:flex;flex-direction:column;gap:1rem;margin:1rem 0 1.2rem}
.checkout-summary div{display:flex;justify-content:space-between;align-items:center;padding:.95rem 1rem;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);color:#fff}
.order-item__right{margin-left:auto;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;justify-content:center;padding:.55rem .85rem;border-radius:999px;background:rgba(176,122,255,.12);color:#e2d0ff;border:1px solid rgba(176,122,255,.24);font-weight:700;font-size:.86rem;text-transform:lowercase}
.product-detail{display:grid;grid-template-columns:560px 1fr;gap:1.4rem;align-items:start}
.product-detail__image{border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.product-detail__image img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.product-detail__content{padding:1.2rem 0}
.product-detail__content h1{margin:.3rem 0 .7rem;font-size:clamp(2rem,4vw,3.7rem);color:#fff}
.product-detail__content p{color:rgba(255,255,255,.76);line-height:1.7}
.product-detail__meta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:1rem 0 1.2rem}
.product-detail__meta strong{color:#fff;font-size:1.5rem}
.chat-shell{display:flex;flex-direction:column;gap:1rem}
.chat-shell__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.3rem 1.4rem;border-radius:24px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(10,10,15,.82),rgba(8,8,12,.94))}
.chat-shell__head h1{margin:.2rem 0 .4rem;color:#fff;font-size:clamp(1.8rem,4vw,3rem)}
.chat-shell__head p{margin:0;color:rgba(255,255,255,.72)}
.chat-close-box{padding:.9rem 1rem;border-radius:18px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03);color:#fff}
.chat-messages{scroll-behavior:smooth;display:flex;flex-direction:column;gap:.9rem;padding:1.1rem;min-height:420px;border-radius:24px;border:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(10,10,15,.82),rgba(8,8,12,.94))}
.chat-message{display:flex;flex-direction:column;gap:.35rem;max-width:78%}
.chat-message.is-mine{align-self:flex-end}
.chat-message.is-other{align-self:flex-start}
.chat-message__meta strong{color:#fff}
.chat-message__meta small{color:rgba(255,255,255,.55)}
.chat-message__bubble{padding:.95rem 1rem;border-radius:18px;color:#fff;line-height:1.6;border:1px solid rgba(255,255,255,.06)}
.chat-message.is-mine .chat-message__bubble{background:linear-gradient(90deg,#8f53ff,#b07aff)}
.chat-message.is-other .chat-message__bubble{background:rgba(255,255,255,.05)}
.chat-form{display:flex;flex-direction:column;gap:.9rem}
.chat-form textarea{width:100%;min-height:110px}
.chat-actions-admin{display:flex;flex-direction:column;gap:1rem}
.mark-delivered-form{display:flex;justify-content:flex-end}
.gateway-ready-box{margin-top:1rem;padding:1rem 1.05rem;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.gateway-ready-box strong{display:block;color:#fff;margin-bottom:.45rem}
.gateway-ready-box p{margin:0 0 .35rem;color:rgba(255,255,255,.76);line-height:1.6}
.gateway-ready-box small{color:rgba(255,255,255,.52)}
@media (max-width:1100px){.profile-grid,.product-detail{grid-template-columns:1fr}}
@media (max-width:900px){.admin-stats{grid-template-columns:1fr}.chat-shell__head{flex-direction:column}.chat-message{max-width:100%}}
@media (max-width:640px){.profile-page{width:calc(100vw - 2rem)}.auth-grid{grid-template-columns:1fr}}


/* ==== Fix solicitado: menú perfil + botones compra + panel carrito ==== */
.top-actions{
  display:flex;
  align-items:center;
  gap:.8rem;
}

.user-menu,
.cart-menu{
  position:relative;
}

.user-trigger{
  width:48px;
  height:48px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(20,20,28,.95), rgba(13,13,18,.92));
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-weight:800;
}

.user-dropdown,
.cart-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:300px;
  padding:.9rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(13,13,18,.96), rgba(9,9,14,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .22s ease;
  z-index:120;
}

.user-menu.is-open .user-dropdown,
.cart-menu.is-open .cart-dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.user-dropdown__head,
.cart-dropdown__head{
  padding-bottom:.85rem;
  margin-bottom:.85rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.user-dropdown__head strong,
.cart-dropdown__head strong{
  display:block;
  color:#fff;
  margin-bottom:.25rem;
}

.user-dropdown__head small,
.cart-dropdown__head small{
  color:rgba(255,255,255,.55);
}

.user-dropdown a{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.8rem .85rem;
  border-radius:14px;
  text-decoration:none;
  color:rgba(255,255,255,.82);
}

.user-dropdown a:hover{
  background:rgba(255,255,255,.04);
  color:#fff;
}

.cart-dropdown__empty{
  color:rgba(255,255,255,.72);
  padding:.4rem 0;
}

.cart-dropdown__list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.cart-dropdown__item{
  display:flex;
  gap:.75rem;
  align-items:center;
}

.cart-dropdown__item img{
  width:52px;
  height:52px;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0;
}

.cart-dropdown__item strong{
  display:block;
  color:#fff;
  font-size:.92rem;
}

.cart-dropdown__item small{
  color:rgba(255,255,255,.6);
}

.cart-dropdown__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:.9rem;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.06);
  color:#fff;
}

.cart-dropdown__button{
  display:block;
  text-align:center;
  margin-top:.9rem;
  text-decoration:none;
  padding:.9rem 1rem;
  border-radius:14px;
  background:linear-gradient(90deg,#8f53ff,#b07aff);
  color:#fff;
  font-weight:800;
}

.top-badge--dynamic{
  display:none;
}

.store-card-actions{
  margin-top:1rem;
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
}

.store-card-actions form{
  margin:0;
}

.store-card-actions .mini-btn,
.store-card-actions .mini-btn--primary{
  min-height:42px;
}

@media (max-width:640px){
  .cart-dropdown,
  .user-dropdown{
    min-width:250px;
  }
}


/* ==== Fix definitivo dropdown carrito ==== */
.topbar,
.top-actions,
.cart-menu,
.user-menu{
  overflow: visible !important;
}

.topbar{
  position: relative;
  z-index: 50;
}

.cart-menu{
  position: relative;
  z-index: 200;
}

.cart-dropdown{
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  right: 0;
  z-index: 9999 !important;
}

.cart-menu.is-open .cart-dropdown{
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

[data-cart-trigger]{
  cursor: pointer !important;
}


/* ==== Fix real del carrito conectado ==== */
.topbar,
.top-actions,
.cart-menu,
.user-menu{
  overflow: visible !important;
}

.topbar{
  position: relative;
  z-index: 50;
}

.cart-menu{
  position: relative;
  z-index: 200;
}

.cart-dropdown{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:300px;
  padding:.9rem;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(13,13,18,.96), rgba(9,9,14,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .22s ease, visibility .2s ease;
  z-index:9999 !important;
}

.cart-menu.is-open .cart-dropdown{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

.cart-dropdown__head{
  padding-bottom:.85rem;
  margin-bottom:.85rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.cart-dropdown__head strong{
  display:block;
  color:#fff;
  margin-bottom:.25rem;
}

.cart-dropdown__head small{
  color:rgba(255,255,255,.55);
}

.cart-dropdown__empty{
  color:rgba(255,255,255,.72);
  padding:.4rem 0;
}

.cart-dropdown__list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}

.cart-dropdown__item{
  display:flex;
  gap:.75rem;
  align-items:center;
}

.cart-dropdown__item img{
  width:52px;
  height:52px;
  border-radius:12px;
  object-fit:cover;
  flex-shrink:0;
}

.cart-dropdown__item strong{
  display:block;
  color:#fff;
  font-size:.92rem;
}

.cart-dropdown__item small{
  color:rgba(255,255,255,.6);
}

.cart-dropdown__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:.9rem;
  padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.06);
  color:#fff;
}

.cart-dropdown__button{
  display:block;
  text-align:center;
  margin-top:.9rem;
  text-decoration:none;
  padding:.9rem 1rem;
  border-radius:14px;
  background:linear-gradient(90deg,#8f53ff,#b07aff);
  color:#fff;
  font-weight:800;
}

[data-cart-trigger]{
  cursor:pointer !important;
}


/* ==== Botones visibles en cards ==== */
.store-card-actions{
  margin-top:1rem;
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  align-items:center;
}
.store-card-actions__form{
  margin:0;
}
.store-card-actions .mini-btn{
  min-height:44px;
  padding:.82rem 1rem;
}
.game-card .store-card-actions{
  position:relative;
  z-index:3;
}


/* ==== Pestaña juegos + botones compra visibles ==== */
.topbar-search{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.75rem 1rem;
  min-width:280px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.topbar-search i{
  color:rgba(255,255,255,.62);
}
.topbar-search input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#fff;
  font:inherit;
}
.topbar-search input::placeholder{
  color:rgba(255,255,255,.48);
}
.store-card-actions{
  margin-top:1rem;
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  align-items:center;
}
.store-card-actions__form{
  margin:0;
}
.store-card-actions .mini-btn{
  min-height:44px;
  padding:.82rem 1rem;
}
.games-page-grid .game-card{
  min-height:100%;
}
@media (max-width: 1100px){
  .topbar-search{
    min-width:220px;
  }
}
@media (max-width: 860px){
  .topbar-search{
    display:none;
  }
}


/* ==== Fix juegos + botones + carrito ==== */
.games-grid .game-thumb,
.games-grid .game-thumb img{
  display:block;
  width:100%;
}

.games-grid .game-thumb{
  overflow:hidden;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
}

.games-grid .game-thumb img{
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: rgba(255,255,255,.03);
}

.store-card-actions{
  margin-top: 1rem;
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
  align-items: center;
}

.store-card-actions .mini-btn,
.store-card-actions .mini-btn--primary{
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.store-card-actions .mini-btn:hover,
.store-card-actions .mini-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.store-card-actions .mini-btn:disabled,
.store-card-actions .mini-btn--primary:disabled{
  opacity:.6;
  cursor:not-allowed !important;
  transform:none;
  box-shadow:none;
}

.cart-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.cart-item{
  display:grid;
  grid-template-columns: 140px 1fr auto;
  gap:1rem;
  align-items:center;
  padding:1rem;
  border-radius:22px;
  overflow:hidden;
}

.cart-item img{
  width:140px !important;
  height:140px !important;
  border-radius:18px;
  object-fit:cover;
  display:block;
}

.cart-item__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25rem;
}

.cart-item__body strong{
  font-size:1.1rem;
  line-height:1.2;
  word-break:break-word;
}

.cart-item__body small{
  line-height:1.5;
}

.cart-item__body span{
  font-size:1.5rem;
  font-weight:800;
}

.cart-item__remove{
  margin:0;
  align-self:center;
}

.cart-item__remove .mini-btn{
  cursor:pointer !important;
}

@media (max-width: 900px){
  .cart-item{
    grid-template-columns: 1fr;
  }
  .cart-item img{
    width:100% !important;
    height:240px !important;
  }
  .cart-item__remove{
    justify-self:start;
  }
}





/* ==== Loader exacto restaurado ==== */
.site-loader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(76,0,255,.14), transparent 18%),
    linear-gradient(180deg, #050509 0%, #020204 100%);
  transition:opacity .55s ease, visibility .55s ease;
}
.site-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.site-loader__glow{
  position:absolute;
  width:44vw;
  height:44vw;
  min-width:420px;
  min-height:420px;
  max-width:860px;
  max-height:860px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(109,49,255,.22) 0%, rgba(109,49,255,.10) 28%, rgba(109,49,255,0) 68%);
  filter:blur(18px);
  animation:ifosLoaderPulse 1.8s ease-in-out infinite alternate;
}
.site-loader__inner{
  position:relative;
  z-index:2;
  text-align:center;
  padding:2rem 2.5rem;
}
.site-loader__logo{
  font-size:clamp(3rem, 7vw, 6.3rem);
  font-weight:900;
  letter-spacing:.04em;
  line-height:1;
  text-transform:uppercase;
  font-family:Inter, sans-serif;
}
.site-loader__logo span{
  color:#f3f3f8;
  text-shadow:0 0 12px rgba(255,255,255,.10), 0 0 28px rgba(255,255,255,.05);
}
.site-loader__logo em{
  color:#a66cff;
  font-style:normal;
  text-shadow:0 0 14px rgba(166,108,255,.34), 0 0 36px rgba(166,108,255,.18);
}
.site-loader__text{
  margin-top:2rem;
  color:rgba(255,255,255,.86);
  font-size:1.05rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.site-loader__subtext{
  margin-top:.8rem;
  color:rgba(255,255,255,.56);
  font-size:.9rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
@keyframes ifosLoaderPulse{
  from{ transform:scale(.96); opacity:.82; }
  to{ transform:scale(1.04); opacity:1; }
}


/* ==== Ajuste hero inicio solicitado ==== */
.hero-section{
  align-items:start !important;
  min-height:64vh !important;
  padding-top:0 !important;
  padding-bottom:2rem !important;
  gap:2rem !important;
}
.hero-copy{
  transform:translateY(-28px);
}
.hero-featured{
  max-width:350px !important;
  transform:translateY(-10px);
}
.featured-card{
  min-height:500px !important;
  max-height:500px;
}
.featured-image{
  height:100% !important;
  object-fit:cover !important;
}
.featured-info{
  padding:1rem !important;
}
.featured-copy p{
  font-size:0.98rem;
}
.featured-copy span{
  font-size:0.82rem;
}
.featured-price-row{
  gap:.9rem !important;
}
.featured-price-row strong{
  font-size:1rem;
}
@media (max-width: 1100px){
  .hero-copy{
    transform:none;
  }
  .hero-featured{
    max-width:320px !important;
    transform:none;
  }
  .featured-card{
    min-height:440px !important;
    max-height:none;
  }
}
@media (max-width: 900px){
  .hero-section{
    align-items:center !important;
  }
  .hero-copy{
    transform:none;
  }
  .hero-featured{
    justify-self:center !important;
    max-width:340px !important;
  }
}


/* ==== Ajuste final home solicitado ==== */
.hero-featured{
  transform: translateY(34px) !important;
}

.catalog-section{
  margin-top: 90px !important;
}

@media (max-width: 1100px){
  .hero-featured{
    transform: translateY(18px) !important;
  }

  .catalog-section{
    margin-top: 56px !important;
  }
}

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

  .catalog-section{
    margin-top: 32px !important;
  }
}


/* ==== Ocultar sección inferior en primer pantallazo ==== */
.catalog-section{
  margin-top: 170px !important;
}

@media (max-width: 1100px){
  .catalog-section{
    margin-top: 110px !important;
  }
}

@media (max-width: 900px){
  .catalog-section{
    margin-top: 48px !important;
  }
}


/* ==== Fix definitivo para que no se asome la siguiente sección ==== */
.hero-section{
  min-height: calc(100vh - 150px) !important;
  padding-bottom: 120px !important;
}

.catalog-section{
  margin-top: 0 !important;
}

@media (max-width: 1100px){
  .hero-section{
    min-height: calc(100vh - 140px) !important;
    padding-bottom: 90px !important;
  }
}

@media (max-width: 900px){
  .hero-section{
    min-height: auto !important;
    padding-bottom: 40px !important;
  }
}


/* ==== Carrusel stack home inspirado en CodePen ==== */
.hero-copy{
  transform: translateY(58px) !important;
}
.featured-card--stack{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.featured-stack{
  position: relative;
  width: 100%;
  max-width: 390px;
  height: 610px;
  margin-left: auto;
  margin-right: 0;
  transform: translateY(34px);
}
.featured-stack__track{
  position: relative;
  width: 100%;
  height: 100%;
}
.featured-stack__slide{
  position: absolute;
  inset: 0;
  border-radius: 28px;
  overflow: hidden;
  background: #0b0b12;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
  transition:
    transform .95s cubic-bezier(.22,.61,.36,1),
    opacity .75s ease,
    filter .75s ease;
  will-change: transform, opacity;
}
.featured-stack__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-stack__slide.is-front{
  z-index: 3;
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}
.featured-stack__slide.is-middle{
  z-index: 2;
  transform: translate3d(-18px, 18px, 0) scale(.93);
  opacity: .55;
  filter: brightness(.82);
}
.featured-stack__slide.is-back{
  z-index: 1;
  transform: translate3d(-34px, 34px, 0) scale(.86);
  opacity: .28;
  filter: brightness(.64);
}
.featured-stack__overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.05rem;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(6,6,10,.22) 18%, rgba(7,7,12,.82) 65%, rgba(7,7,12,.96) 100%);
  z-index: 4;
  color: #fff;
}
.featured-stack__overlay span{
  display: inline-flex;
  padding: .46rem .78rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  font-size: .84rem;
  margin-bottom: .7rem;
}
.featured-stack__overlay h3{
  margin: 0 0 .35rem;
  font-size: 2rem;
  line-height: 1.05;
}
.featured-stack__overlay p{
  margin: 0;
  color: rgba(255,255,255,.84);
  line-height: 1.55;
}
.featured-stack__overlay .featured-card__footer{
  margin-top: .95rem;
}
.featured-stack__slide.is-exit{
  transform: translate3d(55px, -10px, 0) scale(.96);
  opacity: 0;
}
@media (max-width: 1100px){
  .featured-stack{
    max-width: 355px;
    height: 560px;
    transform: translateY(34px);
  }
}
@media (max-width: 900px){
  .hero-copy{
    transform: none !important;
  }
  .featured-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);
  }
}


.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;
  }
}



/* ===== Checkout redesign ===== */
.checkout-page{
  position:relative;
}
.checkout-page::before,
.checkout-page::after{
  content:'';
  position:fixed;
  pointer-events:none;
  inset:auto;
  width:340px;
  height:340px;
  border-radius:999px;
  filter:blur(100px);
  opacity:.18;
  z-index:0;
}
.checkout-page::before{
  top:180px;
  left:-80px;
  background:rgba(143,83,255,.9);
}
.checkout-page::after{
  top:320px;
  right:-100px;
  background:rgba(74,205,255,.55);
}
.checkout-page > *{
  position:relative;
  z-index:1;
}
.checkout-hero-panel{
  display:grid;
  grid-template-columns: minmax(0,1.2fr) minmax(330px,.75fr);
  gap:1.2rem;
  margin: .4rem 0 1.2rem;
}
.checkout-hero-copy,
.checkout-countdown-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg, rgba(12,12,18,.86), rgba(7,7,10,.95));
  box-shadow:0 22px 60px rgba(0,0,0,.34);
}
.checkout-hero-copy{
  padding:2rem 2rem 2.1rem;
}
.checkout-hero-copy::before,
.checkout-countdown-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top right, rgba(176,122,255,.18), transparent 40%);
  pointer-events:none;
}
.checkout-hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.58rem .95rem;
  border-radius:999px;
  background:rgba(143,83,255,.10);
  border:1px solid rgba(176,122,255,.22);
  color:#efe3ff;
  font-size:.86rem;
  margin-bottom:1rem;
}
.checkout-hero-copy h1{
  margin:0;
  font-size:clamp(2.5rem, 4vw, 4.2rem);
  line-height:.96;
  letter-spacing:-.04em;
  color:#fff;
}
.checkout-hero-copy h1 span{
  color:#b07aff;
  text-shadow:0 0 30px rgba(176,122,255,.18);
}
.checkout-hero-copy p{
  margin:1rem 0 0;
  max-width:740px;
  color:rgba(255,255,255,.72);
  line-height:1.75;
  font-size:1rem;
}
.checkout-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.4rem;
}
.checkout-hero-points span{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.78rem 1rem;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
  font-size:.92rem;
}
.checkout-hero-points i{
  color:#8ef3ff;
}
.checkout-countdown-card{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:100%;
}
.checkout-countdown-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
}
.checkout-countdown-top small{
  color:rgba(255,255,255,.62);
  text-transform:uppercase;
  letter-spacing:.18rem;
  font-size:.72rem;
}
.checkout-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.52rem .8rem;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:#efe3ff;
  font-size:.78rem;
  font-weight:700;
}
.checkout-countdown-card #cart-timer{
  display:block;
  margin-top:.8rem;
  font-size:clamp(2.3rem, 3vw, 3rem);
  line-height:1;
  color:#fff;
  letter-spacing:-.04em;
}
.checkout-countdown-card p{
  margin:.9rem 0 1rem;
  color:rgba(255,255,255,.72);
  line-height:1.7;
}
.checkout-mini-stats{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.75rem;
}
.checkout-mini-stats div{
  padding:.9rem 1rem;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.checkout-mini-stats span{
  display:block;
  color:rgba(255,255,255,.58);
  margin-bottom:.3rem;
  font-size:.82rem;
}
.checkout-mini-stats strong{
  color:#fff;
  font-size:1.02rem;
}
.checkout-layout{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.82fr);
  gap:1.2rem;
  align-items:start;
}
.checkout-card{
  padding:1.5rem;
  position:relative;
  overflow:hidden;
}
.checkout-card::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.03), transparent 32%, transparent 68%, rgba(176,122,255,.08));
  opacity:.85;
}
.checkout-card > *{
  position:relative;
  z-index:1;
}
.checkout-card--summary{
  position:sticky;
  top:110px;
}
.checkout-card__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.1rem;
}
.checkout-card__head h2{
  margin:.35rem 0 .3rem;
  color:#fff;
  font-size:2rem;
  letter-spacing:-.03em;
}
.checkout-card__head p{
  margin:0;
  color:rgba(255,255,255,.68);
}
.checkout-section-tag{
  display:inline-flex;
  color:rgba(255,255,255,.58);
  text-transform:uppercase;
  letter-spacing:.18rem;
  font-size:.75rem;
}
.checkout-items-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.checkout-item-card{
  position:relative;
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:1rem;
  align-items:center;
  padding:1rem;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.checkout-item-card:hover{
  transform:translateY(-3px);
  border-color:rgba(176,122,255,.24);
  box-shadow:0 22px 45px rgba(0,0,0,.30);
}
.checkout-item-card__shine{
  content:'';
  position:absolute;
  inset:auto auto 0 0;
  width:45%;
  height:2px;
  background:linear-gradient(90deg, rgba(176,122,255,.95), transparent);
  opacity:.85;
}
.checkout-item-card__thumb{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  height:128px;
  border:1px solid rgba(255,255,255,.07);
  background:#0d0d12;
}
.checkout-item-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.checkout-item-card:hover .checkout-item-card__thumb img{
  transform:scale(1.06);
}
.checkout-item-card__body{
  min-width:0;
}
.checkout-item-card__title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.checkout-item-card__title-row strong{
  display:block;
  color:#fff;
  font-size:1.25rem;
  line-height:1.1;
}
.checkout-item-card__title-row small{
  display:block;
  color:rgba(255,255,255,.52);
  margin-top:.4rem;
}
.checkout-qty-pill{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:38px;
  padding:0 .8rem;
  border-radius:999px;
  background:rgba(143,83,255,.14);
  border:1px solid rgba(176,122,255,.22);
  color:#efe3ff;
  font-weight:800;
}
.checkout-item-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:.9rem;
}
.checkout-item-card__meta span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.54rem .74rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.84);
  font-size:.82rem;
}
.checkout-item-card__meta i{
  color:#98f6ff;
}
.checkout-item-card__price-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-top:1rem;
  padding-top:.95rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.checkout-item-card__price-row small{
  color:rgba(255,255,255,.58);
}
.checkout-item-card__price-row strong{
  color:#d9c3ff;
  font-size:1.55rem;
  letter-spacing:-.03em;
}
.checkout-safe-note{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  margin-top:1.1rem;
  padding:1rem 1.05rem;
  border-radius:22px;
  background:linear-gradient(90deg, rgba(35,184,110,.10), rgba(143,83,255,.06));
  border:1px solid rgba(255,255,255,.08);
}
.checkout-safe-note i{
  margin-top:.15rem;
  color:#6df0af;
  font-size:1.15rem;
}
.checkout-safe-note strong{
  display:block;
  color:#fff;
  margin-bottom:.25rem;
}
.checkout-safe-note p{
  margin:0;
  color:rgba(255,255,255,.7);
  line-height:1.65;
}
.premium-summary{
  gap:.85rem;
}
.premium-summary div{
  padding:1rem 1rem;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.premium-summary span{
  color:rgba(255,255,255,.72);
}
.premium-summary strong{
  color:#fff;
  font-size:1.1rem;
}
.checkout-summary__final{
  background:linear-gradient(90deg, rgba(143,83,255,.14), rgba(255,255,255,.04)) !important;
  border-color:rgba(176,122,255,.18) !important;
}
.checkout-summary__final strong{
  color:#d7baff;
  font-size:1.4rem;
}
.checkout-coupon-box{
  margin-top:1.15rem;
  padding:1.1rem;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.checkout-coupon-box__title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.95rem;
}
.checkout-coupon-box__title h3{
  margin:0;
  color:#fff;
  font-size:1.12rem;
}
.checkout-coupon-box__title p{
  margin:.25rem 0 0;
  color:rgba(255,255,255,.64);
  line-height:1.55;
  font-size:.92rem;
}
.checkout-coupon-icon{
  width:44px;
  height:44px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(143,83,255,.14);
  border:1px solid rgba(176,122,255,.2);
  color:#eadcff;
}
.checkout-coupon-label{
  display:block;
  color:rgba(255,255,255,.85);
  margin-bottom:.65rem;
  font-size:.92rem;
  font-weight:600;
}
.checkout-coupon-row{
  display:flex;
  gap:.75rem;
  align-items:center;
}
.checkout-coupon-row input{
  flex:1;
  min-width:0;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(10,10,15,.92), rgba(20,20,28,.96));
  color:#fff;
  padding:0 1rem;
  outline:none;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.checkout-coupon-row input::placeholder{
  color:rgba(255,255,255,.38);
}
.checkout-coupon-row input:focus{
  border-color:rgba(176,122,255,.35);
  box-shadow:0 0 0 4px rgba(143,83,255,.10);
}
.checkout-coupon-btn,
.checkout-remove-coupon{
  min-height:54px;
  padding:0 1rem;
  font-weight:700;
  border-radius:16px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.checkout-coupon-btn:hover,
.checkout-remove-coupon:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.checkout-applied-coupon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:.9rem;
  padding:.95rem 1rem;
  border-radius:18px;
  background:rgba(72,214,144,.08);
  border:1px solid rgba(72,214,144,.18);
}
.checkout-applied-coupon span{
  color:#d8ffe9;
  line-height:1.5;
}
.checkout-applied-coupon i{
  color:#8ef6bc;
}
.checkout-pay-box{
  margin-top:1.15rem;
  padding:1.1rem;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
}
.checkout-pay-box__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:1rem;
}
.checkout-pay-box__meta span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.62rem .82rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#fff;
  font-size:.84rem;
}
.checkout-pay-box__meta i{
  color:#9af0ff;
}
.checkout-pay-btn{
  width:100%;
  min-height:58px;
  font-size:1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  border-radius:18px;
}
@keyframes checkoutFloat {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}
.checkout-countdown-card,
.checkout-coupon-icon{
  animation:checkoutFloat 5s ease-in-out infinite;
}
@media (max-width: 1180px){
  .checkout-hero-panel,
  .checkout-layout{
    grid-template-columns:1fr;
  }
  .checkout-card--summary{
    position:relative;
    top:auto;
  }
}
@media (max-width: 820px){
  .checkout-hero-copy,
  .checkout-countdown-card,
  .checkout-card{
    padding:1.2rem;
  }
  .checkout-card__head h2,
  .checkout-hero-copy h1{
    font-size:clamp(2.1rem, 9vw, 3rem);
  }
  .checkout-item-card{
    grid-template-columns:1fr;
  }
  .checkout-item-card__thumb{
    height:220px;
  }
  .checkout-item-card__title-row{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (max-width: 640px){
  .checkout-hero-points,
  .checkout-mini-stats,
  .checkout-pay-box__meta{
    grid-template-columns:1fr;
  }
  .checkout-mini-stats{
    display:grid;
  }
  .checkout-coupon-row,
  .checkout-applied-coupon{
    flex-direction:column;
    align-items:stretch;
  }
  .checkout-coupon-btn,
  .checkout-remove-coupon,
  .checkout-pay-btn{
    width:100%;
  }
  .checkout-summary div{
    gap:.8rem;
    flex-direction:column;
    align-items:flex-start;
  }
}


.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%;
  }
}