/* ===== StarrKit — Module 5 : Box Opening v4 (icônes + anims) ===== */
.box-open { text-align: center; }
.box-row {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.box-card {
    padding: 22px 18px; background: var(--surface);
    border: 2px solid var(--border); border-radius: 20px;
    box-shadow: 0 6px 0 var(--border), 0 10px 18px rgba(0, 0, 0, .3);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    position: relative; overflow: visible;
}
.box-card h2 { font-size: 1.1rem; margin: 6px 0 4px; text-align: center; }

.box-visual {
    width: 140px; height: 140px;
    display: grid; place-items: center;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3));
    animation: sk-float 2.8s ease-in-out infinite;
    font-size: 64px; line-height: 1;
    transform-origin: center;
}
.box-card--small .box-visual { width: 110px; height: 110px; font-size: 52px; }
.box-card--big   .box-visual { width: 150px; height: 150px; font-size: 70px; }
.box-card--mega  .box-visual { width: 170px; height: 170px; font-size: 84px; }

.box-visual.shake { animation: box-shake .55s ease, box-jitter .55s steps(8) infinite; }
@keyframes box-shake {
    0%, 100% { transform: rotate(0) scale(1); }
    15% { transform: rotate(-14deg) scale(1.05); }
    30% { transform: rotate(14deg) scale(1.08); }
    45% { transform: rotate(-12deg) scale(1.06); }
    60% { transform: rotate(10deg) scale(1.04); }
    75% { transform: rotate(-6deg) scale(1.02); }
}
@keyframes box-jitter {
    0% { translate: 0 0; } 25% { translate: -2px 1px; }
    50% { translate: 1px -2px; } 75% { translate: 2px 1px; }
    100% { translate: -1px -1px; }
}

.box-visual.burst::before {
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,200,0,.7) 35%, rgba(255,200,0,0) 70%);
    animation: box-flash .8s ease forwards;
    pointer-events: none; z-index: 2;
}
.box-visual.burst { position: relative; }
@keyframes box-flash {
    0%   { opacity: 0;   transform: scale(.3); }
    20%  { opacity: 1;   transform: scale(1.2); }
    100% { opacity: 0;   transform: scale(2.4); }
}

.box-visual.sparkle::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(circle 4px at 20% 15%, #ffd84d 100%, transparent 100%),
        radial-gradient(circle 3px at 80% 18%, #fff 100%, transparent 100%),
        radial-gradient(circle 5px at 90% 75%, #ffd84d 100%, transparent 100%),
        radial-gradient(circle 4px at 10% 82%, #fff 100%, transparent 100%),
        radial-gradient(circle 3px at 50% 5%, #fff 100%, transparent 100%),
        radial-gradient(circle 4px at 50% 95%, #ffd84d 100%, transparent 100%);
    animation: box-sparkle 1.1s ease forwards;
    pointer-events: none; z-index: 3;
}
@keyframes box-sparkle {
    0%   { opacity: 0; transform: scale(.4); }
    30%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.8); }
}

/* === Récompenses === */
.box-rewards { display: grid; gap: 12px; margin-top: 22px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.reward {
    padding: 16px 14px; text-align: center; border-radius: 16px;
    background: var(--surface); border: 2px solid var(--border);
    animation: sk-pop .4s both, reward-rise .5s cubic-bezier(.2,1.3,.4,1) both;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.reward__type { font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); font-weight: 800; }
.reward__icon {
    width: 76px; height: 76px; border-radius: 14px;
    background: var(--surface-2); border: 2px solid var(--border);
    display: grid; place-items: center; font-size: 2.2rem;
    animation: br-zoom .5s cubic-bezier(.2,1.3,.4,1) both .15s;
}
.reward__icon--img { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: var(--surface-2); }
.reward__icon--type { font-size: 2.4rem; }
.reward__name { display: block; font-family: var(--display); font-size: 1rem; line-height: 1.2; }
.reward__qty { font-family: var(--body); color: var(--gold, #f4c443); font-weight: 800; font-size: .9rem; }
.reward__new { font-family: var(--display); font-size: .68rem; background: var(--cta); color: var(--cta-ink); padding: 2px 7px; border-radius: 8px; }

@keyframes reward-rise { 0% { transform: translateY(20px) scale(.85); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes br-zoom { 0% { transform: scale(.4) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.reward.rarity-common    { border-color: #9ca3af; }
.reward.rarity-rare      { border-color: #4f9eff; animation: sk-pop .4s both, reward-rise .5s cubic-bezier(.2,1.3,.4,1) both, glow-rare 1.2s ease; }
.reward.rarity-super-rare{ border-color: #4f9eff; animation: sk-pop .4s both, reward-rise .5s cubic-bezier(.2,1.3,.4,1) both, glow-rare 1.2s ease; }
.reward.rarity-epic      { border-color: #c084fc; animation: sk-pop .4s both, reward-rise .5s cubic-bezier(.2,1.3,.4,1) both, glow-epic 1.2s ease; }
.reward.rarity-mythic    { border-color: #ef4444; animation: sk-pop .4s both, reward-rise .5s cubic-bezier(.2,1.3,.4,1) both, glow-myth 1.3s ease; }
.reward.rarity-legendary { border-color: var(--gold, #ffd84d); animation: sk-pop .4s both, reward-rise .5s cubic-bezier(.2,1.3,.4,1) both, glow-leg 1.5s ease; }
.reward.rarity-chromatic { border-color: transparent; animation: sk-pop .4s both, reward-rise .5s cubic-bezier(.2,1.3,.4,1) both, glow-chroma 2s linear infinite, chroma-border 3s linear infinite; }

@keyframes glow-rare  { 0%, 100% { box-shadow: 0 0 0 transparent; } 40% { box-shadow: 0 0 28px #4f9eff; } }
@keyframes glow-epic  { 0%, 100% { box-shadow: 0 0 0 transparent; } 40% { box-shadow: 0 0 32px #c084fc; } }
@keyframes glow-myth  { 0%, 100% { box-shadow: 0 0 0 transparent; } 40% { box-shadow: 0 0 36px #ef4444; } }
@keyframes glow-leg   { 0%, 100% { box-shadow: 0 0 0 transparent; } 40% { box-shadow: 0 0 44px var(--gold, #ffd84d); } }
@keyframes glow-chroma { 0% { box-shadow: 0 0 32px #ec4899; } 25% { box-shadow: 0 0 32px #f59e0b; } 50% { box-shadow: 0 0 32px #22c55e; } 75% { box-shadow: 0 0 32px #06b6d4; } 100% { box-shadow: 0 0 32px #ec4899; } }
@keyframes chroma-border { 0% { border-color: #ec4899; } 25% { border-color: #f59e0b; } 50% { border-color: #22c55e; } 75% { border-color: #06b6d4; } 100% { border-color: #ec4899; } }

/* === Albums === */
.collection { margin-top: 40px; }
.collection__title { font-size: 1.4rem; }
.collection__grid { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.coll-item { padding: 14px; text-align: center; border-radius: 16px; background: var(--surface); border: 2px solid var(--border); transition: transform .12s ease; }
.coll-item:hover { transform: translateY(-3px); }
.coll-item.is-locked { opacity: .45; }
.coll-item__icon { font-size: 1.8rem; font-family: var(--display); }
.coll-item__icon--img {
    width: 56px; height: 56px; margin: 0 auto;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    border-radius: 10px;
}
/* Brawler non débloqué : version grisée/assombrie (effet verrouillé) */
.coll-item__icon--silhouette { filter: grayscale(1) brightness(.4); }
.coll-item__name { display: block; font-size: .8rem; margin-top: 6px; }
.coll-item__count { display: inline-block; margin-top: 4px; font-size: .72rem; color: var(--text-dim); }

.rarity-common    { border-left: 5px solid #9ca3af; }
.rarity-rare      { border-left: 5px solid #4f9eff; }
.rarity-super-rare{ border-left: 5px solid #4f9eff; }
.rarity-epic      { border-left: 5px solid #c084fc; }
.rarity-mythic    { border-left: 5px solid #ef4444; }
.rarity-legendary { border-left: 5px solid var(--gold, #ffd84d); }
.rarity-chromatic { border-left: 5px solid #ec4899; }

@media (max-width: 640px) {
    .box-row { grid-template-columns: 1fr; padding: 0 12px; gap: 12px; }
    .box-card { width: 100%; padding: 18px 16px; }
    .box-card--small .box-visual,
    .box-card--big   .box-visual,
    .box-card--mega  .box-visual { width: 140px; height: 140px; font-size: 60px; }
    .box-rewards { grid-template-columns: 1fr 1fr; padding: 0 12px; }
    .reward__icon { width: 64px; height: 64px; font-size: 1.9rem; }
}