/* ---------- Portada ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 20px 64px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 120%, #e0b35a33, transparent 60%),
    linear-gradient(#1f170e, transparent);
  border-bottom: 1px solid var(--slot-border);
}
.hero-icons { position: absolute; inset: 0; pointer-events: none; }
.hero-icons img {
  position: absolute;
  width: 72px;
  opacity: .22;
  animation: float 9s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px #000);
}
@keyframes float {
  50% { transform: translateY(-18px) rotate(8deg); }
}
.hero-content { position: relative; max-width: 720px; margin: 0 auto; }
.hero-logo {
  display: block;
  width: min(460px, 100%);
  height: auto;
  margin: 0 auto 16px;
  border-radius: 22px;
  box-shadow: 0 0 60px #e0b35a55, 0 16px 40px #000c;
}
.eyebrow { margin: 0; color: var(--accent); letter-spacing: 4px; text-transform: uppercase; font-size: 12px; }
.hero h1 {
  margin: 6px 0 10px;
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(#fff3d1, #e0b35a 55%, #9a6a1c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #0009);
}
.lead { font-size: 17px; color: #d8c8a8; margin: 0 auto 24px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 16px; font-size: 12px; color: var(--muted); letter-spacing: 1px; }

.home { max-width: 1100px; margin: 0 auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; }
.section-title { margin: 0 0 14px; font-size: 20px; color: var(--accent); }
.hidden { display: none !important; }

.alert {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--bad);
  background: #e07a5a1a;
  color: #ffd2c4;
}

/* ---------- Estado de la cuenta ---------- */
.account-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.account-card .big-avatar { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--accent); background: var(--slot); }
.account-card .who { flex: 1; min-width: 200px; }
.account-card h2 { margin: 0; font-size: 22px; }
.wallet {
  text-align: right;
  padding: 12px 20px;
  border-radius: 12px;
  background: #00000040;
  border: 1px solid var(--slot-border);
}
.wallet .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }
.wallet .amount { display: flex; align-items: center; gap: 8px; font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wallet .coin { width: 26px; height: 26px; }

.pending-card { text-align: center; }
.hourglass { font-size: 44px; display: inline-block; animation: flip 2.4s ease-in-out infinite; }
@keyframes flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }

/* ---------- Tarjetas de juegos ---------- */
.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--slot-border);
  background: linear-gradient(var(--panel), var(--bg-2));
  color: var(--text);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
a.game-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 30px #e0b35a33; }
.game-art {
  position: relative;
  height: 170px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #3e2c18, #17110a);
  border-bottom: 1px solid var(--slot-border);
}
.game-art img { width: 110px; filter: drop-shadow(0 6px 10px #000); }
.game-info { padding: 16px; }
.game-info h3 { margin: 0 0 6px; color: var(--accent-2); }
.game-info p { margin: 0 0 10px; color: #cdbd9c; }
.pays { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.pays li { padding: 4px 10px; border-radius: 20px; background: #00000040; font-size: 12px; }
.pays b { color: var(--accent-2); }
.even-t { color: #7fb2ff; }
.odd-t { color: #ff8a80; }
.zero-t { color: #5fd88a; }
.lock {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #000b;
  font-size: 12px;
}
body.locked a.game-card { pointer-events: none; }
body.locked .lock { display: block; }
body.locked .game-art { filter: grayscale(.6) brightness(.7); }
.soon-card { opacity: .65; }

/* Rueda en miniatura */
.mini-wheel {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 6px solid #c8962f;
  background: conic-gradient(#2fa856 0 17deg, transparent 0), repeating-conic-gradient(var(--odd) 0 17deg, var(--even) 17deg 34deg);
  box-shadow: 0 0 0 3px #3a2a14, 0 0 25px #e0b35a55;
  animation: spin 7s linear infinite;
}
.mini-wheel::after {
  content: '';
  position: absolute;
  inset: 50%;
  width: 46px;
  height: 46px;
  margin: -23px;
  border-radius: 50%;
  background: radial-gradient(#f7d27e, #8a5d1a);
}
.mini-ball {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #bbb);
  animation: orbit 2.2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit { from { transform: rotate(0) translateY(-52px); } to { transform: rotate(-360deg) translateY(-52px); } }

/* Rodillos en miniatura */
.mini-reels {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  background: #0d0905;
  border: 3px solid #c8962f;
  box-shadow: 0 0 25px #e0b35a55;
}
.mini-reels img { width: 52px; height: 52px; background: #2a1f12; border-radius: 6px; transition: transform .3s; }
.mini-reels img.flip { transform: rotateX(90deg); }

/* ---------- Actividad ---------- */
.activity { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feed li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: #00000030; }
.feed .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .pos { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Icono del juego de cada premio */
.game-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.icon-roulette {
  position: relative;
  border: 2px solid #c8962f;
  background: conic-gradient(#2fa856 0 60deg, transparent 0), repeating-conic-gradient(var(--odd) 0 60deg, var(--even) 60deg 120deg);
}
.icon-roulette::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(#f7d27e, #8a5d1a);
}
.icon-slots { border-radius: 6px; background: #0d0905; border: 2px solid #c8962f; overflow: hidden; }
.icon-slots img { width: 100%; height: 100%; object-fit: contain; }
.icon-packs { border-radius: 6px; background: #6d1820; border: 2px solid #d9a441; font-size: 15px; }
.icon-mines { border-radius: 6px; background: #0d5a55; border: 2px solid #e8b330; font-size: 15px; }
.icon-cases { border-radius: 6px; background: #1a1206; border: 2px solid #ffc531; font-size: 15px; box-shadow: 0 0 6px #ffc53188; }

.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: #d8c8a8; }
.steps b { color: var(--accent-2); }
code { background: #00000055; padding: 1px 6px; border-radius: 4px; color: var(--accent-2); }

/* Cofres en miniatura */
.mini-chests { display: flex; gap: 2px; align-items: flex-end; }
.mini-chest {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px var(--rc)) drop-shadow(0 0 4px var(--rc));
  animation: chest-bob 2s ease-in-out infinite;
}
.mini-chest:nth-child(2) { animation-delay: .25s; }
.mini-chest:nth-child(3) { animation-delay: .5s; }
.mini-chest:nth-child(4) { animation-delay: .75s; }
@keyframes chest-bob { 50% { transform: translateY(-10px) rotate(-6deg); } }

/* Minas en miniatura */
.mini-mines { display: grid; grid-template-columns: repeat(5, 30px); gap: 5px; }
.mini-mines i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-style: normal;
  border-radius: 6px;
  background: linear-gradient(160deg, #0d5a55, #0a4743);
  border: 1px solid #072f2c;
}
.mini-mines i.g { background: radial-gradient(circle, #ffe08a, #e8b330); animation: chest-bob 2.4s ease-in-out infinite; }
.mini-mines i.b { background: radial-gradient(circle, #ff8a5c, #c0261c); }

/* Sobres en miniatura */
.mini-packs { display: flex; gap: 8px; }
.mini-packs span {
  width: 54px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pc), #fff 25%), var(--pc) 45%, color-mix(in srgb, var(--pc), #000 45%));
  box-shadow: inset 0 0 0 2px #ffffff30, 0 6px 12px #000a;
  animation: chest-bob 2.2s ease-in-out infinite;
}
.mini-packs span:nth-child(2) { animation-delay: .2s; }
.mini-packs span:nth-child(3) { animation-delay: .4s; }
.mini-packs span:nth-child(4) { animation-delay: .6s; }
.mini-packs img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 3px 4px #000a); }

/* Botón único de la portada y destino del desplazamiento */
.games-section { scroll-margin-top: calc(var(--nav-h) + 16px); }
.play-btn { min-width: 220px; font-size: 20px; letter-spacing: 1px; animation: play-pulse 2.2s ease-in-out infinite; }
@keyframes play-pulse { 50% { box-shadow: 0 0 0 6px #e0b35a33, 0 0 28px #e0b35a88; transform: scale(1.03); } }