/* Kafcenter : coffre au trésor violet et or. Pièce qui tourne dans l'anneau de niveau, cartes à bord doré,
   missions cochées, podium en marches, boutique avec halo à la couleur de chaque objet. */

.kafpoints-sheet { --kaf-gold: #ffd32e; --kaf-gold-2: #ff9f1c; --kaf-violet: #8b3dff; }
.kafpoints-sheet .kafpoints-panel { border-color: rgba(255, 211, 46, .28); background: radial-gradient(ellipse at 50% -10%, rgba(139, 61, 255, .35), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(255, 159, 28, .12), transparent 50%), #0f0d15; }
.kafpoints-sheet .kafpoints-panel > header { background: rgba(15, 13, 21, .9); }
.kafpoints-sheet .kafpoints-panel-brand img { animation: kaf-coin-float 3.5s ease-in-out infinite; filter: drop-shadow(0 4px 12px rgba(255, 211, 46, .45)); }
.kafpoints-sheet .kafpoints-panel-brand h2 { background: linear-gradient(90deg, #fff, var(--kaf-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Onglets : pilule dorée. */
.kafpoints-sheet .kafpoints-tabs { background: rgba(15, 13, 21, .92); }
.kafpoints-sheet .kafpoints-tabs button { border-radius: 999px; }
.kafpoints-sheet .kafpoints-tabs button.is-active { background: linear-gradient(90deg, var(--kaf-gold), var(--kaf-gold-2)); color: #2a1300; box-shadow: 0 6px 18px rgba(255, 180, 40, .35); }

/* Aperçu : la pièce tourne dans l'anneau de progression du niveau. */
.kafpoints-sheet .kafpoints-hero { position: relative; overflow: hidden; border-color: rgba(255, 211, 46, .35); background: radial-gradient(circle at 15% 30%, rgba(139, 61, 255, .55), transparent 45%), conic-gradient(from 200deg at 90% 0%, rgba(255, 211, 46, .14), transparent 30%), linear-gradient(135deg, #2b1140, #15111d); }
.kafpoints-sheet .kafpoints-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .1) 45%, transparent 55%); background-size: 250% 100%; animation: kaf-sheen 5s ease-in-out infinite; pointer-events: none; }
.kafpoints-sheet .kafpoints-hero > img { position: relative; z-index: 1; padding: 10px; border-radius: 50%; background: conic-gradient(var(--kaf-gold) calc(var(--kaf-progress, 0) * 1%), rgba(255, 255, 255, .08) 0); box-shadow: 0 0 30px rgba(255, 211, 46, .35); animation: kaf-coin-spin 6s ease-in-out infinite; }
.kafpoints-sheet .kafpoints-hero h2 { font-size: 1.6rem; background: linear-gradient(90deg, #fff, var(--kaf-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Solde et total : cartes au bord doré. */
.kafpoints-sheet .kafpoints-summary article { position: relative; border: 1px solid transparent; border-radius: 16px; background: linear-gradient(#1a1622, #1a1622) padding-box, linear-gradient(135deg, rgba(255, 211, 46, .6), rgba(139, 61, 255, .3), rgba(255, 211, 46, .15)) border-box; }
.kafpoints-sheet .kafpoints-summary article:first-child { background: linear-gradient(135deg, #5a1688, #2c0f45) padding-box, linear-gradient(135deg, var(--kaf-gold), var(--kaf-gold-2), var(--kaf-violet)) border-box; box-shadow: 0 14px 34px -14px rgba(139, 61, 255, .7); }
.kafpoints-sheet .kafpoints-summary strong { background: linear-gradient(180deg, #fff3b0, var(--kaf-gold) 60%, var(--kaf-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.kafpoints-sheet .kafpoints-summary strong em { -webkit-text-fill-color: var(--kaf-gold); }

/* Niveau : barre lumineuse avec reflet qui passe. */
.kafpoints-sheet .kafpoints-level > i { position: relative; height: 12px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.kafpoints-sheet .kafpoints-level > i > i { position: relative; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--kaf-violet), #c86bff, var(--kaf-gold)); box-shadow: 0 0 16px rgba(200, 107, 255, .7); }
.kafpoints-sheet .kafpoints-level > i > i::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: kaf-bar-shine 2.6s ease-in-out infinite; }

/* Missions : une case à cocher qui se remplit. */
.kafpoints-sheet .kafpoints-section { border-color: rgba(255, 255, 255, .07); border-radius: 18px; background: rgba(255, 255, 255, .025); }
.kafpoints-sheet .kafpoints-mission { position: relative; grid-template-columns: 30px minmax(0, 1fr) auto; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .035); }
.kafpoints-sheet .kafpoints-mission::before { display: grid; width: 26px; height: 26px; place-items: center; content: ""; border: 2px solid rgba(255, 255, 255, .2); border-radius: 50%; }
.kafpoints-sheet .kafpoints-mission.is-complete::before { content: "✓"; border-color: transparent; background: linear-gradient(135deg, #53e6a5, #23a86c); color: #04210f; font-size: .8rem; font-weight: 900; box-shadow: 0 0 12px rgba(83, 230, 165, .55); animation: kaf-check .5s cubic-bezier(.2, 1.5, .4, 1); }
.kafpoints-sheet .kafpoints-mission.is-complete strong { color: rgba(255, 255, 255, .6); text-decoration: line-through; text-decoration-color: rgba(83, 230, 165, .6); }
.kafpoints-sheet .kafpoints-mission > b { padding: 4px 9px; border-radius: 999px; background: rgba(255, 211, 46, .12); color: var(--kaf-gold); font-size: .62rem; white-space: nowrap; }
.kafpoints-sheet .kafpoints-progress { height: 5px; border-radius: 999px; }
.kafpoints-sheet .kafpoints-progress > i { background: linear-gradient(90deg, var(--kaf-gold-2), var(--kaf-gold)); }
.kafpoints-sheet .kafpoints-weekly-claim,
.kafpoints-sheet .kafpoints-mission button { border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--kaf-gold), var(--kaf-gold-2)); box-shadow: 0 6px 18px rgba(255, 180, 40, .4); animation: kaf-claim 1.8s ease-in-out infinite; }

/* Historique : frise avec pastilles. */
.kafpoints-sheet .kafpoints-history-item { position: relative; padding-left: 26px; border-radius: 12px; }
.kafpoints-sheet .kafpoints-history-item::before { position: absolute; top: 50%; left: 10px; width: 8px; height: 8px; content: ""; border-radius: 50%; background: var(--kaf-gold); box-shadow: 0 0 8px var(--kaf-gold); transform: translateY(-50%); }
.kafpoints-sheet .kafpoints-history-item.is-spent::before { background: #c86bff; box-shadow: 0 0 8px #c86bff; }
.kafpoints-sheet .kafpoints-history-item > b { color: var(--kaf-gold); }
.kafpoints-sheet .kafpoints-history-item.is-spent > b { color: #c86bff; }

/* Classement : vrai podium en marches (2 · 1 · 3), couronne sur le premier. */
.kafpoints-sheet .kafpoints-podium { align-items: end; }
.kafpoints-sheet .kafpoints-podium-place { border-radius: 16px 16px 6px 6px; }
.kafpoints-sheet .kafpoints-podium-place.place-1 { order: 2; padding-top: 34px; padding-bottom: 26px; border-color: rgba(255, 211, 46, .7); background: linear-gradient(180deg, rgba(255, 211, 46, .28), #1d1626); box-shadow: 0 0 34px -6px rgba(255, 211, 46, .55); }
.kafpoints-sheet .kafpoints-podium-place.place-1::before { position: absolute; top: -18px; content: "👑"; font-size: 1.6rem; filter: drop-shadow(0 4px 8px rgba(255, 211, 46, .6)); animation: kaf-coin-float 3s ease-in-out infinite; }
.kafpoints-sheet .kafpoints-podium-place.place-2 { order: 1; padding-top: 22px; background: linear-gradient(180deg, rgba(220, 225, 235, .18), #1d1a24); border-color: rgba(220, 225, 235, .4); }
.kafpoints-sheet .kafpoints-podium-place.place-3 { order: 3; padding-top: 16px; background: linear-gradient(180deg, rgba(205, 127, 50, .2), #1d1a24); border-color: rgba(205, 127, 50, .45); }
.kafpoints-sheet .kafpoints-medal { box-shadow: 0 0 12px currentColor; }
.kafpoints-sheet .kafpoints-periods { border-radius: 999px; }
.kafpoints-sheet .kafpoints-periods button { border-radius: 999px; }
.kafpoints-sheet .kafpoints-periods button.is-active { background: linear-gradient(90deg, var(--kaf-gold), var(--kaf-gold-2)); color: #2a1300; }
.kafpoints-sheet .kafpoints-rank { grid-template-columns: 26px 32px minmax(0, 1fr) auto; border-radius: 14px; }
.kafpoints-sheet .kafpoints-rank > img,
.kafpoints-sheet .kafpoints-rank > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(255, 211, 46, .14); color: var(--kaf-gold); font-style: normal; font-weight: 900; object-fit: cover; }
.kafpoints-sheet .kafpoints-rank > span { display: grid; min-width: 0; }
.kafpoints-sheet .kafpoints-rank > b { color: var(--kaf-gold); white-space: nowrap; }
.kafpoints-sheet .kafpoints-rank.is-me { border-color: rgba(255, 211, 46, .55); background: linear-gradient(90deg, rgba(255, 211, 46, .14), rgba(255, 255, 255, .02)); }

/* Kafboutique : halo à la couleur de l'objet, possédé = ruban. */
.kafpoints-sheet .kaf-shop-hero { position: relative; overflow: hidden; }
.kafpoints-sheet .kaf-shop-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .1) 45%, transparent 55%); background-size: 250% 100%; animation: kaf-sheen 5s ease-in-out infinite; pointer-events: none; }
.kafpoints-sheet .kaf-shop-hero > strong { background: linear-gradient(180deg, #fff3b0, var(--kaf-gold) 60%, var(--kaf-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kafpoints-sheet .kaf-shop-item { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--item-accent, #ffd32e) 35%, transparent); border-radius: 18px; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--item-accent, #ffd32e) 22%, transparent), transparent 55%), #17141d; transition: transform .2s ease, box-shadow .2s ease; }
.kafpoints-sheet .kaf-shop-item:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px var(--item-accent, #ffd32e); }
.kafpoints-sheet .kaf-shop-item > i { border-radius: 14px; background: color-mix(in srgb, var(--item-accent, #ffd32e) 18%, #0f0d15); box-shadow: 0 0 18px -4px var(--item-accent, #ffd32e); }
.kafpoints-sheet .kaf-shop-item.is-owned::after { position: absolute; top: 6px; left: 6px; padding: 2px 7px; content: "✓ POSSÉDÉ"; border-radius: 999px; background: linear-gradient(90deg, #53e6a5, #23a86c); color: #04210f; font-size: .48rem; font-weight: 900; letter-spacing: .1em; }
.kafpoints-sheet .kaf-shop-item div > b { color: var(--kaf-gold); }

@keyframes kaf-coin-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes kaf-coin-spin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
@keyframes kaf-sheen { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes kaf-bar-shine { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@keyframes kaf-check { 0% { transform: scale(.4); } 100% { transform: scale(1); } }
@keyframes kaf-claim { 0%, 100% { box-shadow: 0 6px 18px rgba(255, 180, 40, .35); } 50% { box-shadow: 0 6px 28px rgba(255, 180, 40, .8); } }

@media (prefers-reduced-motion: reduce) {
  .kafpoints-sheet *, .kafpoints-sheet *::before, .kafpoints-sheet *::after { animation: none !important; }
}