/* DataCard — mini-jeux, infobulle des éclats, tirage « combien de cartes », rangs, famille du jour */

/* ───── Infobulle des éclats ───── */
.hud-pill.gem { cursor: help; }
.tip { position: fixed; z-index: 140; padding: 18px 20px; border-radius: 18px; background: rgba(17, 22, 48, .985); border: 1px solid rgba(111, 141, 255, .5); box-shadow: 0 24px 70px rgba(0, 0, 0, .7); max-height: min(78vh, 680px); overflow: auto; animation: pop .2s; }
.tip h4 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin-bottom: 4px; }
.tip h4 .ic { color: var(--cyan); }
.tip h5 { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: #aebcff; margin: 16px 0 9px; }
.tip p { font-size: .9rem; color: var(--mut); }
.tip p b { color: var(--cyan); }
.tip ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.tip li { display: grid; grid-template-columns: 22px 1fr; gap: 1px 10px; font-size: .88rem; line-height: 1.35; }
.tip li .ic { color: var(--acc); grid-row: span 2; margin-top: 2px; }
.tip li b { grid-column: 2; color: var(--cyan); font-weight: 700; font-size: .82rem; }

/* ───── « Combien de cartes ? » à l'ouverture ───── */
.luck { margin: auto; text-align: center; display: grid; gap: 8px; justify-items: center; }
.luck small { letter-spacing: .32em; text-transform: uppercase; color: #aab4e6; font-weight: 700; }
.luck-num { font-size: clamp(5.5rem, 24vw, 9rem); font-weight: 800; line-height: 1; min-width: 1.1ch; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 34px rgba(140, 100, 255, .75)); }
.luck-num.land { animation: luckLand .6s cubic-bezier(.2, 1.6, .3, 1); }
.luck-num.n6 { background: linear-gradient(135deg, #ffe48a, #ff8a3d, #ff5fd2); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 40px rgba(255, 170, 60, .85)); }
.luck b { font-size: 1.35rem; letter-spacing: .02em; }
@keyframes luckLand { 0% { transform: scale(2.3); opacity: .2; } 60% { transform: scale(.92); } 100% { transform: scale(1); } }

/* ───── Famille du jour, rangs, crédits ───── */
.feat-body { display: flex; gap: 14px; align-items: center; }
.feat-ico { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 1.7rem; color: #fff; background: linear-gradient(145deg, hsl(var(--h) 80% 56%), hsl(calc(var(--h) + 40) 70% 34%)); box-shadow: 0 8px 26px hsl(var(--h) 80% 45% / .5); flex: none; }
.feat-body b { display: block; font-size: 1.15rem; }
.feat-body span { color: var(--mut); font-size: .88rem; }
.rank-badge-wrap { filter: drop-shadow(0 10px 26px rgba(255, 200, 61, .35)); flex: none; }
.rank-badge.locked { filter: grayscale(1) brightness(.55); opacity: .65; }
.hud-pill.rank { padding-left: 8px; }
.hud-pill.rank .rank-badge { margin: -5px 0; }
.ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.rung { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.rung b { font-size: .8rem; line-height: 1.2; }
.rung small { color: var(--mut); font-size: .72rem; }
.rung.now { border-color: var(--gold); background: rgba(255, 200, 61, .09); box-shadow: 0 0 28px rgba(255, 200, 61, .35); }
.rung.done .rank-badge { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
.rb-rays.spin { transform-box: view-box; transform-origin: 50px 52px; animation: spin 16s linear infinite; }
.rb-orb { animation: orbPulse 3s ease-in-out infinite alternate; }
@keyframes orbPulse { to { opacity: .35; } }
.banner .bi { background: none; box-shadow: none; width: auto; height: auto; filter: drop-shadow(0 0 36px rgba(255, 200, 61, .85)); }
.credit { font-size: .72rem; color: var(--mut); max-width: 300px; text-align: center; line-height: 1.45; }
.credit .ic { margin-right: 6px; }
.credit a { color: #aebcff; }

@media (max-width: 760px) {
  .hud-pill.rank { display: none; }
  .tip { left: 12px !important; right: 12px; width: auto !important; }
}

/* ───── Boosters gratuits, booster Gold, calendrier, fenêtres de récompense ───── */
.btn .stock { margin-left: 10px; padding: 2px 10px; border-radius: 99px; background: rgba(0, 0, 0, .3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.btn.gold.big { box-shadow: 0 10px 34px rgba(255, 177, 43, .5); animation: ctaPulse 2s ease-in-out infinite; }
.next-free { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: .9rem; min-height: 1.4em; margin-top: 2px; }
.next-free b { color: var(--txt); font-variant-numeric: tabular-nums; }

.calendar { grid-column: 1 / -1; }
.cdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.cday { display: grid; justify-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); text-align: center; }
.cday small { font-size: .7rem; color: var(--mut); letter-spacing: .06em; text-transform: uppercase; }
.cday b { font-size: .88rem; }
.cday .ci { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; background: rgba(79, 209, 255, .16); color: var(--cyan); }
.cday.done { opacity: .75; } .cday.done .ci { background: rgba(61, 220, 151, .22); color: var(--good); }
.cday.now { border-color: var(--acc); background: rgba(111, 141, 255, .14); box-shadow: 0 0 24px rgba(111, 141, 255, .45); animation: pulseBadge 1.8s ease-in-out infinite; }
.cday.gold .ci { background: linear-gradient(135deg, #ffe48a, #ffb12b); color: #3a2000; box-shadow: 0 0 18px rgba(255, 177, 43, .5); }
.cday.gold b { color: var(--gold); }
.cal-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: .9rem; }

.reward-modal { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; animation: fadeIn .25s; }
.reward-modal.out { opacity: 0; transition: opacity .25s; }
.rm-back { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(60, 50, 140, .75), rgba(4, 6, 16, .92)); backdrop-filter: blur(6px); }
.rm-box { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 30px 26px; border-radius: 28px; background: linear-gradient(160deg, #1d2450, #0d1128); border: 1px solid rgba(111, 141, 255, .5); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); animation: pop .45s cubic-bezier(.2, 1.4, .3, 1); }
.reward-modal.gold .rm-box { border-color: rgba(255, 200, 61, .8); box-shadow: 0 0 80px rgba(255, 177, 43, .45), 0 30px 90px rgba(0, 0, 0, .7); }
.rm-box small { letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--mut); font-size: .75rem; }
.rm-box h3 { font-size: 1.7rem; font-weight: 800; }
.rm-box p { color: var(--mut); line-height: 1.5; }
.chest { width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; font-size: 3rem; color: #fff; background: linear-gradient(135deg, #4f7bff, #b06bff); box-shadow: 0 14px 40px rgba(130, 100, 255, .55); animation: chestBob 2s ease-in-out infinite; }
.chest.gold { background: linear-gradient(135deg, #ffe48a, #ff9f1c); color: #3a2000; box-shadow: 0 14px 50px rgba(255, 177, 43, .7); }
@keyframes chestBob { 50% { transform: translateY(-8px) rotate(-3deg) scale(1.04); } }
.rm-notes { list-style: none; padding: 0; display: grid; gap: 8px; text-align: left; width: 100%; }
.rm-notes li { padding: 9px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); font-size: .92rem; line-height: 1.4; }
.rm-gift { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; font-weight: 700; background: linear-gradient(135deg, rgba(255, 200, 61, .2), rgba(255, 95, 210, .15)); border: 1px solid rgba(255, 200, 61, .55); }
.rm-gift .ic { color: var(--gold); }

.updates { display: grid; gap: 16px; }
.upd b { display: block; font-size: 1.02rem; }
.upd small { display: block; color: var(--mut); margin: 2px 0 6px; font-size: .8rem; }
.upd ul { margin: 0; padding-left: 20px; display: grid; gap: 3px; color: #cfd6f8; font-size: .9rem; }

@media (max-width: 760px) {
  .cdays { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cday .ci { width: 36px; height: 36px; }
}

/* ───── Combien de cartes ? ───── */
.luck-slots { display: flex; gap: clamp(6px, 2vw, 12px); margin-top: 6px; }
.luck-slots i { width: clamp(30px, 9vw, 46px); height: clamp(42px, 12.6vw, 64px); border-radius: 9px; border: 2px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); transition: .25s; }
.luck-slots i.on { border: 2px solid #fff; background: linear-gradient(150deg, #6f8dff, #b06bff 55%, #ff5fd2); box-shadow: 0 0 22px rgba(176, 107, 255, .9); animation: slotPop .5s cubic-bezier(.2, 1.8, .3, 1); }
.luck-slots i.off { opacity: .25; }
@keyframes slotPop { 0% { transform: translateY(24px) scale(.4); opacity: 0; } 100% { transform: none; } }
.luck-sub { font-style: normal; font-weight: 700; color: #cfd6ff; letter-spacing: .04em; min-height: 1.4em; animation: rise .5s both; }
.ov-count { display: flex; align-items: baseline; gap: 6px; flex: none; padding: 5px 14px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid var(--line); font-weight: 800; }
.ov-count small { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #aab4e6; }
.ov-count b { font-size: 1.5rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.ov-count b.bump { animation: bump .5s cubic-bezier(.2, 1.6, .3, 1); }
.ov-count span { color: #aab4e6; }

/* ───── Nombre de cartes : le chiffre doit éclater ───── */
.ov-rays.dim { opacity: .16; }
.luck { position: relative; gap: 4px; }
.luck::before { content: ""; position: absolute; left: 50%; top: 46%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(8, 10, 30, .92) 0, rgba(8, 10, 30, .7) 34%, transparent 66%); }
.luck small { font-size: 1.05rem; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.luck-num { font-size: clamp(9rem, 40vw, 17rem); font-weight: 900; letter-spacing: -.04em; background-image: linear-gradient(180deg, #fff 8%, #cfe0ff 40%, #8a7bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 .12em rgba(255, 255, 255, .9)) drop-shadow(0 .05em 0 rgba(60, 40, 170, .9)) drop-shadow(0 0 .45em rgba(140, 100, 255, .9)); }
.luck-num.n5 { background-image: linear-gradient(180deg, #fff 8%, #d7ffe9 40%, #3ddc97 100%); filter: drop-shadow(0 0 .12em #fff) drop-shadow(0 .05em 0 rgba(10, 100, 70, .9)) drop-shadow(0 0 .45em rgba(61, 220, 151, .9)); }
.luck-num.n6 { background-image: linear-gradient(180deg, #fff 8%, #fff0b0 38%, #ff9a2e 100%); filter: drop-shadow(0 0 .12em #fff) drop-shadow(0 .05em 0 rgba(150, 60, 0, .9)) drop-shadow(0 0 .5em rgba(255, 170, 60, 1)); }
.luck b { font-size: 1.7rem; text-shadow: 0 2px 16px rgba(0, 0, 0, .8); }
.luck-slots i { width: clamp(38px, 11vw, 58px); height: clamp(53px, 15.4vw, 81px); }
.luck-sub { font-size: 1.05rem; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }