.dailySection {
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  
  /* Fundo blur + escurecido */
  .dailySection::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("main/box/1.webp") center center / cover no-repeat;
    filter: blur(12px) brightness(0.35);
    opacity: 0.8;
    transform: scale(1.1); /* evita bordas visíveis no blur */
    z-index: 0;
  }
  
  /* camada extra de leve escurecimento */
  .dailySection::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
  }
  
  /* conteúdo acima do fundo */
  .dailySection > * {
    position: relative;
    z-index: 2;
  }
.box-title{
    font-style: italic;
    font-size: 24px;
    font-weight: 700;
}  
.box-title2{
  font-style: italic;
  font-size: 24px;
  font-weight: 700;
}  
.daily-hero{
    position:relative;
    padding: 28px 0 56px;
    background: radial-gradient(120% 120% at 50% 10%, #111a2e 0%, #0b1220 50%, #0a111f 100%);
    overflow:hidden;
  }
  .daily-hero::before{
    /* vinheta suave */
    content:""; position:absolute; inset:-10%;
    background: radial-gradient(70% 60% at 50% 0%, rgba(99,210,255,.12) 0%, transparent 55%),
                radial-gradient(90% 120% at 50% 120%, rgba(0,0,0,.75) 0%, rgba(0,0,0,.3) 60%, transparent 80%);
    pointer-events:none;
  }
  
  /* voltar */
  .back-link{
    display:inline-flex; align-items:center; gap:.25rem;
    color: var(--muted); text-decoration:none; font-weight: 800; letter-spacing:.08em;
    opacity:.9;
  }
  .back-link:hover{ color:#cfe6ff; }
  
  /* título */
  .box-title{
    margin: 12px 0 14px;
    color:#fff; font-weight:900; text-transform:uppercase; font-style:italic;
    letter-spacing:.14em;
    font-size: clamp(28px, 5vw, 56px);
    text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.45);
  }
  /* título alternativo */
  .box-title2{
    margin: 12px 0 14px;
    color:#fff; font-weight:900; text-transform:uppercase; font-style:italic;
    letter-spacing:.14em;
    font-size: clamp(28px, 5vw, 26px);
    text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.45);
  }
  
  /* badges */
  .badges-wrap{ display:flex; gap:14px; justify-content:center; margin-bottom: 18px; flex-wrap:wrap; }
  .pill{
    display:inline-flex; align-items:center;
    padding:10px 18px; border-radius: 999px;
    font-weight:700; color:#f4f7fb; letter-spacing:.02em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.35);
    backdrop-filter: blur(6px);
  }
  .pill-bonus{ background: linear-gradient(180deg, rgba(184,115,68,.25), rgba(184,115,68,.18)); }
  .pill-event{ background: linear-gradient(180deg, rgba(98,197,84,.25), rgba(98,197,84,.18)); }
  
  /* hero com halo */
  .hero-figure{
    position:relative; width:min(560px, 88vw); margin: 8px auto 28px;
    aspect-ratio: 16/12;
  }
  .hero-figure::before{
    content:""; position:absolute; inset:auto 10% 8% 10%; height:46%;
    background: radial-gradient(60% 80% at 50% 100%, rgba(255,255,255,.9) 0%, rgba(99,210,255,.35) 40%, rgba(0,0,0,0) 70%);
    filter: blur(10px); opacity:.9; pointer-events:none;
  }
  .hero-figure img{
    position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%; object-fit:contain;
    filter: drop-shadow(0 16px 28px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(99,210,255,.18));
  }
  
  /* CTA gigante com canto chanfrado e glow */
  .cta-giant{
    --pad:18px;
    display:inline-flex; align-items:center; justify-content:center; gap:.25rem;
    padding: var(--pad) clamp(28px, 6vw, 64px);
    color:#eaf7ff; text-decoration:none; font-weight:900; letter-spacing:.08em;
    border-radius: 14px; position:relative; isolation:isolate;
    background: linear-gradient(180deg, #16354a 0%, #0d2738 100%);
    box-shadow: 0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08);
    text-transform:uppercase;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  }
  .cta-giant::before, .cta-giant::after{
    /* cantos chanfrados */
    content:""; position:absolute; top:8px; bottom:8px; width:12px; border-radius:4px; z-index:-1;
    background: linear-gradient(180deg, #2aa6d6 0%, #63d2ff 100%);
    filter: drop-shadow(0 0 10px var(--glow));
  }
  .cta-giant::before{ left:-2px; clip-path: polygon(0 0, 100% 12px, 100% calc(100% - 12px), 0 100%); }
  .cta-giant::after { right:-2px; clip-path: polygon(0 12px, 100% 0, 100% 100%, 0 calc(100% - 12px)); }
  .cta-giant:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 32px var(--glow);
  }
  .rewards-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
  }
  
  /* Card */
  .reward-card{
    cursor: pointer;
    position: relative;
    background: radial-gradient(140% 120% at 50% 20%, #1a2440 0%, #121a2e 60%, #0f172a 100%);
    border-radius: 12px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 12px 22px rgba(0,0,0,.35);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    display: flex;
    flex-direction: column;
    min-height: 240px;
  }
  
  /* linha inferior sutil (muda por raridade) */
  .reward-card::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0; height:3px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    opacity:.5;
  }
  
  /* área da arte */
  .reward-card .art{
    flex: 1 1 auto;
    display:grid; place-items:center;
    padding: 18px 12px 8px;
  }
  .reward-card .art img{
    max-width: 90%; max-height: 120px; object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
    transition: transform .28s ease, filter .28s ease;
  }
  
  /* meta */
  .reward-card .meta{
    padding: 10px 14px 14px;
  }
  .reward-card .title{
    color:#eaf2ff; margin:0 0 2px; font-weight:700; letter-spacing:.01em;
  }
  .reward-card .sub{
    color:#a9b7d1; margin:0 0 8px; font-size:.9rem;
  }
  .reward-card .price{
    color:#fff; font-weight:800;
  }
  
  /* botão info */
  .reward-card .info-btn{
    position:absolute; top:10px; right:10px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.12);
    color:#cfe3ff; border-radius: 50%;
    width:28px; height:28px; display:grid; place-items:center;
  }
  .reward-card .info-btn:hover{ color:#fff; border-color: rgba(255,255,255,.25); }
  
  /* Hover suave */
  .reward-card:hover{
    transform: translateY(-8px);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.10),
      0 18px 36px rgba(0,0,0,.5);
  }
  .reward-card:hover .art img{
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 18px 30px rgba(0,200,255,.30));
  }
  /* animação só no item (premio) */
.reward-card .art img {
    max-width: 90%;
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
    transition: transform .4s ease, filter .4s ease;
    transform-origin: center;
  }
  
  .reward-card:hover .art img {
    transform: translateY(-4px) scale(1.05) rotate(-7deg);
    filter: drop-shadow(0 18px 30px rgba(0,200,255,.35));
  }
  
  /* Cores por raridade (linha inferior + halo leve) */
  .rarity-legendary::after{ background: linear-gradient(90deg, transparent, #ffc24d, transparent); }
  .rarity-epic::after     { background: linear-gradient(90deg, transparent, #ec72ff, transparent); }
  .rarity-rare::after     { background: linear-gradient(90deg, transparent, #5aa9ff, transparent); }
  .rarity-uncommon::after { background: linear-gradient(90deg, transparent, #4cd6a8, transparent); }
  .rarity-common::after   { background: linear-gradient(90deg, transparent, #7f8ea3, transparent); }

/* faixa */
.steps-bar{
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border: 1px solid rgba(158,176,210,.18);
    border-radius: 12px;
    padding: 16px 18px;
  }
  
  /* grid dinâmico: funciona com 3 ou n passos */
  .steps-list{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(10px, 2vw, 24px);
    align-items:center;
  }
  
  /* cada passo alinhado e com altura confortável */
  .step{
    display:flex; align-items:center; gap:16px;
    min-height: 84px;
  }
  
  /* HEX: mantém proporção com aspect-ratio (nunca achata) */
  .hex{
    position:relative;
    width: clamp(52px, 6vw, 66px);
    aspect-ratio: 64 / 72;           /* <- garante formato */
    flex: 0 0 auto;                  /* não estica */
    display:grid; place-items:center;
  }
  .hex svg{
    position:absolute; inset:0;
    width:100%; height:100%;
  }
  .hex .n{
    position:absolute; inset:0; display:grid; place-items:center;
    font-weight:800; font-size:clamp(16px, 2.2vw, 20px);
    color:#e6eefb;
  }
  
  /* texto */
  .txt{ color:#c9d4ea; line-height:1.25; font-weight:600; }
  .txt strong{ display:block; color:#eaf2ff; }
  .txt .muted{ display:block; color:#9fb0c7; font-weight:500; }
  .accent{ color:#63d2ff; }
  
  /* versão “fixa em 3 colunas” opcional (adicione .steps-3 na <ol>) */
  .steps-list.steps-3{ grid-template-columns: repeat(3, minmax(260px, 1fr)); }
  
  /* responsivo extra */
  @media (max-width: 576px){
    .step{ min-height:72px; gap:12px; }
  }
  
  /* círculo numerado */
.hex{
    position: relative;
    width: clamp(52px, 6vw, 66px);
    aspect-ratio: 1 / 1;              /* círculo perfeito */
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid rgba(158,176,210,.6);
    border-radius: 50%;               /* faz o círculo */
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.03), rgba(255,255,255,.00));
    transition: all .25s ease;
  }
  .hex .n{
    font-weight: 800;
    font-size: clamp(16px, 2.2vw, 20px);
    color: #e6eefb;
  }
  
  /* efeito hover */
  .step:hover .hex{
    border-color: #63d2ff;
    box-shadow: 0 0 12px rgba(99,210,255,.4);
    transform: translateY(-2px);
  }
  .hidden {
    display: none !important;
}

.roulette {
    padding: 24px 0 8px;
}

.roulette-window {
    position: relative;
    height: 160px;
    border-radius: 12px;
    background: radial-gradient(120% 160% at 20% 20%, #0b1530 0%, #0a1024 50%, #070d1a 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 40px rgba(0, 0, 0, .5);
    overflow: hidden;
}

/* faixa que corre */
.roulette-strip {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 0 24px;
    will-change: transform;
}

/* item da roleta */
.roll-item {
    flex: 0 0 140px;
    /* largura fixa "tile" */
    height: 120px;
    border-radius: 10px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .45);
}

.roll-item .art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
}

.roll-item img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
    transition: transform .25s ease;
}

.roll-item:hover img {
    transform: translateY(-3px) scale(1.03)
}

/* cores por raridade (combina com as tuas) */
.r-legendary {
    background: radial-gradient(120% 160% at 20% 20%, #2a1752 0%, #1a1032 40%, #130b26 100%);
    box-shadow: inset 0 0 0 2px rgba(168, 85, 247, .7), 0 8px 24px rgba(98, 0, 255, .25);
}

.r-epic {
    background: radial-gradient(120% 160% at 20% 20%, #3c0b2d 0%, #22091e 40%, #160514 100%);
    box-shadow: inset 0 0 0 2px rgba(236, 72, 153, .7), 0 8px 24px rgba(236, 72, 153, .25);
}

.r-rare {
    background: radial-gradient(120% 160% at 20% 20%, #0b2a57 0%, #091b38 40%, #071327 100%);
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, .7), 0 8px 24px rgba(59, 130, 246, .25);
}

.r-uncommon {
    background: radial-gradient(120% 160% at 20% 20%, #05253a 0%, #051626 45%, #030d17 100%);
    box-shadow: inset 0 0 0 2px rgba(56, 189, 248, .7), 0 8px 24px rgba(56, 189, 248, .25);
}

.r-common {
    background: radial-gradient(120% 160% at 20% 20%, #1c2438 0%, #0f172a 60%, #0b1220 100%);
    box-shadow: inset 0 0 0 2px rgba(148, 163, 184, .4), 0 8px 24px rgba(0, 0, 0, .25);
}

/* ponteiro central */
.roulette-pointer {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0;
    pointer-events: none;
}

.roulette-pointer::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    filter: drop-shadow(0 0 8px rgba(99, 210, 255, .5));
}

.roulette-pointer i {
    position: absolute;
    top: 8px;
    left: -10px;
    font-size: 22px;
    color: #63d2ff;
    text-shadow: 0 0 10px rgba(99, 210, 255, .6);
}

/* ações e resultado */
.roulette-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.roulette-actions .trade-secondary-btn {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.04);
    color: #e8edff;
    font-weight: 700;
    padding: 10px 16px;
}
.roulette-actions .trade-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.resultado {
    margin: 18px auto 0;
    display: block;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.resultado .tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #9fb0c7;
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 4px 8px;
    border-radius: 999px;
}

.res-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99, 210, 255, .12), rgba(99, 210, 255, .02));
    border: 1px solid rgba(99, 210, 255, .25);
}

.res-card img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.res-meta h5 {
    margin: 0;
    font-weight: 800;
}

.res-meta small {
    color: #9fb0c7;
}

/* fade nas bordas da janela */
.roulette-window::after,
.roulette-window::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    pointer-events: none;
}

.roulette-window::before {
    left: 0;
    background: linear-gradient(90deg, #0a1024, transparent);
}

.roulette-window::after {
    right: 0;
    background: linear-gradient(270deg, #0a1024, transparent);
}
/* cabeçalho do resultado */
.res-head{
text-transform: uppercase;
letter-spacing: .14em;
font-weight: 800;
font-size: 13px;
color:#b8c6db;
text-align:center;
margin-bottom:10px;
}

/* cartão grande do resultado */
.res-card.res-big{
display:flex; 
flex-direction: column;               /* empilha: imagem em cima, texto embaixo */
align-items:center; 
gap:12px;
padding:18px 20px; 
border-radius:14px;
background: linear-gradient(135deg, rgba(99,210,255,.16), rgba(99,210,255,.04));
border:1px solid rgba(99,210,255,.28);
box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
max-width: min(520px, 90vw);
margin: 0 auto;
animation: popIn .45s cubic-bezier(.2,.8,.2,1);
}

/* imagem maior */
.res-card.res-big img{
width: clamp(110px, 22vw, 160px);
height: clamp(110px, 22vw, 160px);
object-fit: contain;
filter: drop-shadow(0 14px 26px rgba(0,0,0,.45));
transform: translateZ(0);
}

/* título maior */
.res-card.res-big .res-meta h3{
margin:0; 
font-weight: 900; 
font-size: clamp(22px, 3.6vw, 28px);
line-height: 1.1;
color:#eaf2ff;
text-align:center;
}
.res-card.res-big .res-meta small{
display:block;
margin-top:4px;
color:#9fb0c7;
font-size: 14px;
text-align:center;
}

/* animação de entrada */
@keyframes popIn{
0%{ transform: translateY(10px) scale(.96); opacity:0; }
100%{ transform: translateY(0) scale(1); opacity:1; }
}