/* =============================================================
   JUEGOSDRAG — TESTS-REWARDS-AO.CSS (v2026.06)
   Sin dependencias Bootstrap — tema AO puro
   ============================================================= */

/* ── HERO RECOMPENSAS ── */
.rw-hero{position:relative;min-height:380px;overflow:hidden;background:var(--ao-bg2);border:1px solid var(--ao-border);display:flex;align-items:center;margin-bottom:28px}
.rw-hero__bg{position:absolute;inset:0;z-index:0}
.rw-hero__bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 75% 40%,rgba(115,103,240,.12),transparent),radial-gradient(ellipse 50% 50% at 20% 80%,rgba(245,200,66,.06),transparent)}
.rw-hero__bg::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px);pointer-events:none}
.rw-hero__runes{position:absolute;inset:-10px;font-size:2.5rem;color:rgba(115,103,240,.04);letter-spacing:20px;line-height:2.2;word-break:break-all;animation:runeFloat 40s linear infinite;pointer-events:none}
.rw-hero__content{position:relative;z-index:2;padding:40px 48px;max-width:600px}
.rw-hero__eyebrow{font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:.3em;color:#00d2ff;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.rw-hero__eyebrow::before{content:'';width:28px;height:1px;background:#00d2ff;box-shadow:0 0 6px #00d2ff}
.rw-hero__title{font-family:'Cinzel',serif;font-size:clamp(1.6rem,3.5vw,2.8rem);font-weight:900;line-height:1.1;margin-bottom:10px}
.rw-hero__title .t-main{color:#7367f0;text-shadow:0 0 30px rgba(115,103,240,.3)}
.rw-hero__title .t-gold{background:linear-gradient(90deg,#f5c842,#ff9800,#7367f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rw-hero__sub{font-size:.95rem;color:var(--ao-muted);line-height:1.6;margin-bottom:24px}
.rw-hero__cta-row{display:flex;gap:12px;flex-wrap:wrap}
.rw-hero__art{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none}
.rw-hero__chest{filter:drop-shadow(0 0 24px rgba(245,200,66,.3));animation:chestFloat 5s ease-in-out infinite}
@keyframes chestFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.rw-hero__orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:1}
.rw-hero__orb--1{width:360px;height:360px;right:-60px;top:-80px;background:radial-gradient(circle,rgba(115,103,240,.25),transparent 70%);animation:orbPulse 6s ease-in-out infinite}
.rw-hero__orb--2{width:220px;height:220px;left:10%;bottom:-60px;background:radial-gradient(circle,rgba(245,200,66,.12),transparent 70%);animation:orbPulse 8s ease-in-out infinite reverse}
@keyframes orbPulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
@keyframes runeFloat{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
@media(max-width:900px){.rw-hero__art{display:none}.rw-hero__content{padding:24px 20px}}

/* ── STATS HEADER ── */
.stat-purple{background:linear-gradient(135deg,rgba(115,103,240,.1),rgba(115,103,240,.05));border-left:3px solid #7367f0}
.stat-gold{background:linear-gradient(135deg,rgba(245,200,66,.1),rgba(245,200,66,.05));border-left:3px solid #f5c842}
.stat-cyan{background:linear-gradient(135deg,rgba(0,210,255,.1),rgba(0,210,255,.05));border-left:3px solid #00d2ff}
.stat-green{background:linear-gradient(135deg,rgba(40,199,111,.1),rgba(40,199,111,.05));border-left:3px solid #28c76f}

/* ── COFRE BLOQUEADO ── */
.jd-cofre-locked{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;user-select:none;position:relative}
.jd-cofre-locked .cofre-img-wrap{position:relative;transition:filter .3s}
.jd-cofre-locked:hover .cofre-img-wrap{filter:drop-shadow(0 0 28px rgba(201,168,76,.8));animation:jd-shake .35s ease}
.jd-cofre-locked .cofre-img-wrap img{width:100%;height:100%;object-fit:contain}
.cofre-label{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.1em;color:var(--ao-muted);text-transform:uppercase;transition:color .3s}
.jd-cofre-locked:hover .cofre-label{color:var(--ao-gold)}
.epic-unlocked .cofre-img-wrap{filter:drop-shadow(0 0 24px rgba(201,168,76,.7))!important;animation:jd-chest-float 3s ease-in-out infinite!important}
.epic-unlocked .cofre-label{color:var(--ao-gold)!important}

/* ── MODAL PRINCIPAL (jdModal) ── */
.jd-modal{background:var(--ao-bg2);border:1px solid var(--ao-border);width:min(520px,94vw);max-height:90vh;overflow-y:auto;position:relative}
.jd-modal::before{content:'';display:block;height:2px;background:linear-gradient(90deg,transparent,var(--ao-gold),transparent)}
.jd-modal-close{position:absolute;top:.6rem;right:.6rem;background:none;border:none;color:var(--ao-muted);font-size:1rem;cursor:pointer;width:26px;height:26px;display:flex;align-items:center;justify-content:center;transition:color .15s;line-height:1}
.jd-modal-close:hover{color:var(--ao-gold)}
.jd-modal-body{padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;position:relative}
.jd-modal-glow{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:220px;height:220px;background:radial-gradient(circle,rgba(124,58,237,.2) 0%,transparent 70%);pointer-events:none}
.jd-modal-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.jd-modal-particles span{position:absolute;width:2px;height:2px;background:var(--ao-gold);border-radius:50%;opacity:0;animation:jd-particle-rise linear infinite;bottom:0}
.jd-modal-particles span:nth-child(1){left:15%;animation-duration:4s}
.jd-modal-particles span:nth-child(2){left:35%;animation-duration:5s;animation-delay:.7s}
.jd-modal-particles span:nth-child(3){left:55%;animation-duration:3.5s;animation-delay:1.2s}
.jd-modal-particles span:nth-child(4){left:75%;animation-duration:4.5s;animation-delay:.3s}
.jd-modal-particles span:nth-child(5){left:88%;animation-duration:3.8s;animation-delay:1.8s}
.jd-modal-scene{position:relative;width:100px;height:100px;flex-shrink:0}
.jd-modal-scene .cofre-img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.jd-modal-content-box{width:100%;border-top:1px solid var(--ao-border);padding-top:1rem;text-align:left;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .4s,padding .3s}
.jd-modal-content-box.visible{max-height:400px;opacity:1;padding-top:1rem}
.jd-modal-content-inner{font-size:.88rem;line-height:1.8;color:var(--ao-text);text-align:left;overflow-y:auto;max-height:280px;padding-right:.25rem}
.jd-modal-content-inner::-webkit-scrollbar{width:3px}
.jd-modal-content-inner::-webkit-scrollbar-thumb{background:var(--ao-gold)}
.jd-modal-unlock-label{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.12em;color:var(--ao-muted);text-transform:uppercase;opacity:0;transition:opacity .4s}
.jd-modal-unlock-label.visible{opacity:1}

/* ── REWARD CARD (campañas) ── */
.reward-card{transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;background:var(--ao-bg2);border:1px solid var(--ao-border)}
.reward-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transition:left .4s}
.reward-card:hover{transform:translateY(-8px);border-color:var(--ao-gold)}
.reward-card:hover::before{left:100%}

/* ── RACHA DÍAS ── */
.jd-streak-line-fill{position:absolute;top:50%;left:0;height:3px;background:linear-gradient(90deg,var(--ao-gold),#00d2ff);transition:width 1.5s ease;box-shadow:0 0 10px rgba(245,200,66,.4)}

/* ── ANIMACIONES COMPARTIDAS ── */
@keyframes jd-shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-3deg)}40%{transform:translateX(4px) rotate(3deg)}60%{transform:translateX(-3px) rotate(-2deg)}80%{transform:translateX(3px) rotate(2deg)}}
@keyframes jd-chest-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes jd-particle-rise{0%{opacity:0;transform:translateY(200px)}10%{opacity:.7}90%{opacity:.3}100%{opacity:0;transform:translateY(-20px)}}
@keyframes jd-pre-shake{0%,100%{transform:translateX(0) rotate(0) scale(1)}15%{transform:translateX(-5px) rotate(-4deg) scale(1.02)}30%{transform:translateX(5px) rotate(4deg) scale(1.02)}75%{transform:translateX(-2px) rotate(-2deg) scale(1.04)}90%{transform:translateX(2px) rotate(2deg) scale(1.04)}}
@keyframes jd-bounce-up{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-14px) scale(1.06)}70%{transform:translateY(4px) scale(.97)}100%{transform:translateY(0) scale(1)}}
@keyframes jd-img-pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes jd-sparkle-pop{0%{opacity:1;transform:scale(0)}60%{opacity:1}100%{opacity:0;transform:scale(1.5) translate(var(--tx,0),var(--ty,-16px))}}
@keyframes jd-flash-burst{0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(2.5)}}
@keyframes jd-rays-spin{0%{opacity:0;transform:rotate(0) scale(.8)}20%{opacity:1}100%{opacity:0;transform:rotate(60deg) scale(1.4)}}