/* DataCard — coffre quotidien et cadeau de mise à jour */
.reward-modal { --rc: #8a7bff; z-index: 130; }
.reward-modal.gold { --rc: #ffd24a; }
.reward-modal .rm-back { background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 30%, #0c1130) 0%, #04060f 78%); backdrop-filter: none; }
.dr-rays { position: absolute; left: 50%; top: 44%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; pointer-events: none; opacity: .5; animation: spin 24s linear infinite;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 4deg, transparent 4deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 34%); mask-image: radial-gradient(circle, #000 0, transparent 34%); transition: opacity .5s; }
.reward-modal.charging .dr-rays { animation-duration: 3s; opacity: .85; }
.reward-modal.opened .dr-rays { opacity: 1; animation-duration: 10s; }
.dr-sparks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dr-sparks i { position: absolute; width: var(--s); height: var(--s); background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkleStar 3s ease-in-out infinite; animation-delay: var(--d); filter: drop-shadow(0 0 6px #fff); }
.reward-modal.shake .dr-box { animation: bigShake .7s; }

/* ───── Coffre quotidien ───── */
.dr-box { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; width: min(540px, 100%); max-height: 100vh; overflow-y: auto; overflow-x: hidden; padding: 18px 10px 24px; text-align: center; }
.dr-x { position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); display: grid; place-items: center; z-index: 3; }
.dr-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 99px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; color: #d7defd; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.dr-title { font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; animation: rise .5s both; }
.dr-title b { background: linear-gradient(135deg, #fff, var(--rc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dr-strip { display: flex; gap: 8px; justify-content: center; }
.ds { display: grid; justify-items: center; gap: 4px; }
.ds span { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: #9fb0ee; border: 1px solid var(--line); }
.ds small { font-size: .68rem; color: var(--mut); font-weight: 700; }
.ds.done span { background: rgba(61, 220, 151, .22); color: var(--good); border-color: rgba(61, 220, 151, .5); }
.ds.now span { background: linear-gradient(135deg, #6f8dff, #b06bff); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 0 24px rgba(130, 110, 255, .85); animation: pulse 1.4s infinite; }
.ds.gold span { background: linear-gradient(135deg, #ffe48a, #ff9f1c); color: #3a2000; border-color: transparent; }
.ds.pop span { animation: donePop .6s; background: rgba(61, 220, 151, .3); color: var(--good); box-shadow: none; }
.dr-chest { position: relative; width: min(300px, 64vw); border: 0; background: none; padding: 0; cursor: pointer; animation: chestFloat 2.6s ease-in-out infinite; margin: 6px 0; }
.dr-chest.open, .dr-chest.shaking { animation: none; }
.dr-chest.shaking { animation: chestShake .09s linear infinite; }
@keyframes chestFloat { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes chestShake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-6px, 2px) rotate(-2.5deg); } 50% { transform: translate(5px, -3px) rotate(2deg); } 75% { transform: translate(-3px, -2px) rotate(-1.5deg); } }
.dr-glow { position: absolute; inset: -34%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 65%, transparent), transparent 64%); animation: auraPulse 2.4s ease-in-out infinite; }
.reward-modal.charging .dr-glow { animation-duration: .5s; }
.reward-modal.opened .dr-glow { inset: -60%; opacity: 1; }
.chest-svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); transition: scale .2s; }
.dr-chest:not(.open):hover .chest-svg { scale: 1.05; }
.chest-svg .cl, .chest-svg .ck { transform-box: view-box; transform-origin: 30px 90px; transition: transform .55s cubic-bezier(.2, 1.7, .3, 1), opacity .25s; }
.chest-svg .cglow { opacity: 0; transition: opacity .4s; }
.dr-chest.open .cl { transform: translateY(-30px) rotate(-20deg); }
.dr-chest.open .ck { opacity: 0; }
.dr-chest.open .cglow { opacity: 1; animation: glowPulse .7s ease-in-out infinite alternate; }
@keyframes glowPulse { to { opacity: .55; } }
.dr-hint { color: #d3dbff; font-weight: 700; letter-spacing: .02em; animation: hintBlink 1.6s ease-in-out infinite; transition: opacity .3s; }
.dr-result { display: grid; justify-items: center; gap: 8px; min-height: 80px; }
.dr-result small { color: #bcc7f5; font-weight: 600; max-width: 340px; line-height: 1.4; }
.rw-big { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: clamp(2.6rem, 11vw, 3.8rem); font-weight: 800; line-height: 1; animation: slamIn .65s cubic-bezier(.2, 1.7, .3, 1) both; }
.rw-big b { background: linear-gradient(180deg, #fff 20%, #9fe8ff); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; filter: drop-shadow(0 4px 18px rgba(79, 209, 255, .5)); }
.rw-big .ic { width: 1em; height: 1em; color: var(--cyan); filter: drop-shadow(0 0 20px rgba(79, 209, 255, .9)); animation: pulse 1s infinite; }
.rw-big.pkl { font-size: clamp(1.5rem, 6vw, 2.1rem); }
.reward-modal.gold .rw-big b { background: linear-gradient(180deg, #fff6c8 10%, #ffb12b); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 18px rgba(255, 170, 40, .7)); }
@keyframes slamIn { 0% { transform: scale(3); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } }
.rw-pack .pack { --pw: 124px; animation: riseOut .9s cubic-bezier(.2, 1.5, .3, 1) both; }
.rw-pack.gold .pack { filter: drop-shadow(0 0 34px rgba(255, 190, 60, .85)); }
@keyframes riseOut { from { transform: translateY(120px) scale(.3) rotate(-18deg); opacity: 0; } 60% { opacity: 1; } }
.dr-foot { display: grid; gap: 12px; width: min(440px, 100%); animation: rise .5s both; }
.sb-top { display: flex; justify-content: space-between; font-weight: 700; font-size: .9rem; margin-bottom: 7px; color: #d3dbff; }
.sb-top span { display: inline-flex; align-items: center; gap: 7px; }
.sb-top .ic { color: var(--flame); }
.sb-top b { color: #fff; }
.sb-bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sb-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb13d, #ff4d6d); box-shadow: 0 0 14px rgba(255, 120, 60, .7); animation: barFill 1.1s .15s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes barFill { from { width: 0 !important; } }
.dr-next { display: flex; align-items: center; justify-content: center; gap: 8px; color: #cfd6ff; font-size: .92rem; }
.dr-next b { color: #fff; }
.dr-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gemfly { position: fixed; left: 0; top: 0; z-index: 210; width: 30px; height: 30px; margin: -15px 0 0 -15px; color: var(--cyan); pointer-events: none; filter: drop-shadow(0 0 8px rgba(79, 209, 255, .95)); }
.gemfly .ic { width: 100%; height: 100%; }

/* ───── Cadeau de mise à jour ───── */
.up-box { position: relative; z-index: 2; width: min(580px, 100%); max-height: calc(100vh - 24px); overflow-y: auto; overflow-x: hidden; display: grid; gap: 14px; justify-items: center; text-align: center; padding: 28px 22px; border-radius: 30px;
  background: linear-gradient(160deg, rgba(28, 34, 82, .94), rgba(12, 16, 40, .97)); border: 1px solid rgba(111, 141, 255, .55); box-shadow: 0 30px 90px rgba(0, 0, 0, .7), 0 0 60px rgba(111, 141, 255, .25); animation: pop .5s cubic-bezier(.2, 1.4, .3, 1); }
.up-title { font-size: clamp(1.9rem, 6vw, 2.7rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-notes { list-style: none; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.up-notes li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); font-size: .94rem; line-height: 1.4; opacity: 0; animation: noteIn .5s calc(.5s + var(--i) * .38s) cubic-bezier(.2, 1.3, .3, 1) forwards; }
.up-notes li span { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: rgba(61, 220, 151, .25); color: var(--good); flex: none; }
@keyframes noteIn { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
.up-gift { display: grid; gap: 8px; justify-items: center; width: 100%; padding: 16px 12px 18px; border-radius: 24px; background: linear-gradient(135deg, rgba(255, 200, 61, .16), rgba(255, 95, 210, .13)); border: 1px solid rgba(255, 200, 61, .55); box-shadow: 0 0 40px rgba(255, 190, 60, .2); animation: pop .5s both; }
.up-label { display: flex; gap: 8px; align-items: center; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .76rem; color: var(--gold); }
.up-packs { display: flex; justify-content: center; flex-wrap: wrap; min-height: 150px; padding: 6px 14px; }
.up-pack { margin: 0 -12px; transform: rotate(var(--r)); animation: dropIn .75s cubic-bezier(.2, 1.5, .3, 1) both; }
.up-pack .pack { --pw: 96px; animation: none; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-240px) rotate(calc(var(--r) - 28deg)) scale(.7); } 55% { opacity: 1; } }
.up-count { font-size: 1.1rem; font-weight: 600; }
.up-count b { font-size: 2.3rem; color: var(--gold); text-shadow: 0 0 24px rgba(255, 190, 60, .6); font-variant-numeric: tabular-nums; }
.up-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; animation: rise .5s both; }
.up-foot .play-btn { width: auto; }

@media (max-width: 760px) {
  .up-pack .pack { --pw: 76px; } .up-packs { min-height: 120px; }
  .ds span { width: 34px; height: 34px; border-radius: 11px; }
  .dr-strip { gap: 6px; }
}

/* ───── Petits écrans : tout doit tenir, le coffre ne doit jamais être coupé ───── */
.dr-box { max-height: calc(100dvh - 32px); }
.chest-svg { overflow: visible; }
.dr-chest { width: min(300px, 64vw, 36vh); margin: 34px 0 6px; }
.reward-modal.opened .dr-chest { width: min(220px, 56vw, 24vh); margin: 30px 0 2px; transition: width .4s; }
.reward-modal.opened .dr-kicker { display: none; }
.reward-modal.opened .dr-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
.reward-modal.opened .dr-box { gap: 8px; padding-top: 10px; }
.dr-result { min-height: 0; }
.rw-big { font-size: clamp(2.2rem, 9vw, 3.2rem); }
.rw-big.pkl { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
.dr-x { position: fixed; top: 12px; right: 12px; }
@media (max-height: 760px) {
  .up-box { gap: 9px; padding: 18px 18px; border-radius: 24px; }
  .up-title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .up-notes { gap: 5px; } .up-notes li { padding: 7px 12px; font-size: .86rem; }
  .up-gift { padding: 10px 10px 12px; gap: 5px; } .up-packs { min-height: 100px; }
  .up-pack .pack { --pw: 70px; } .up-count b { font-size: 1.8rem; }
}