/* ============================================================================
   Récompenses : carte « Nouvel objet obtenu », inventaire, évènements.
   Toutes les classes commencent par « rw- » (le jeu en a déjà beaucoup : voir test/css-namespaces.test.js).
   Les classes du jeu réutilisées sont seulement utilisées, jamais redéfinies : .btn, .chip-btn, .shop-*, .rarity, .hint.
   ========================================================================== */

/* ----- couleurs par rareté et par collection (variables lues par tout ce qui est dessous) ----- */
.rw-r-legendaire { --rw-a:#ffd27a; --rw-b:#ff9a2e; --rw-c:#2b1250; --rw-glow:rgba(255, 170, 60, .7); --rw-ink:#2a1700; }
.rw-r-epique     { --rw-a:#e0c8ff; --rw-b:#a66af0; --rw-c:#251048; --rw-glow:rgba(166, 106, 240, .65); --rw-ink:#1f0d3a; }
.rw-r-rare       { --rw-a:#aeeaf2; --rw-b:#3fb5c8; --rw-c:#0f2a3c; --rw-glow:rgba(63, 181, 200, .6); --rw-ink:#08242e; }
.rw-r-commun     { --rw-a:#eee6cf; --rw-b:#b8ae8e; --rw-c:#2b2820; --rw-glow:rgba(232, 224, 200, .45); --rw-ink:#2a261a; }
.rw-set-halloween { --rw-c:#1d0c3a; --rw-mist:rgba(255, 150, 40, .30); --rw-mist2:rgba(120, 60, 220, .38); }

/* ============================ La carte ============================ */
.rw-root { position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:1rem; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, rgba(46, 14, 70, .84), rgba(4, 2, 12, .95) 72%); animation:rwFade .35s ease-out both; }
.rw-root.rw-out { animation:rwFadeOut .22s ease-in both; }
@keyframes rwFade { from { opacity:0; } to { opacity:1; } } @keyframes rwFadeOut { to { opacity:0; } }

.rw-rays { position:fixed; left:50%; top:46%; width:230vmax; height:230vmax; margin:-115vmax 0 0 -115vmax; pointer-events:none; opacity:.9;
  background:repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rw-b) 26%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 14%, transparent 32%); mask-image:radial-gradient(circle, #000 0, rgba(0, 0, 0, .55) 14%, transparent 32%);
  animation:rwSpin 60s linear infinite; }
@keyframes rwSpin { to { transform:rotate(360deg); } }

.rw-sparks { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.rw-spark { position:absolute; width:var(--sz); height:var(--sz); background:var(--rw-a); clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity:0; animation:rwTwinkle var(--du) ease-in-out var(--dl) infinite; filter:drop-shadow(0 0 6px var(--rw-glow)); }
@keyframes rwTwinkle { 0%, 100% { opacity:0; transform:scale(.3) rotate(0); } 50% { opacity:1; transform:scale(1.15) rotate(90deg); } }

/* La carte ne défile JAMAIS (aucune barre) : rewards.js la met à l'échelle (--rw-s, sur .rw-fit) pour qu'elle tienne toujours dans la fenêtre, boutons compris. */
.rw-fit { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%) scale(var(--rw-s, 1)); transform-origin:center center; } /* centrée exactement, même si elle est plus haute que la fenêtre (sinon le navigateur l'aligne en haut) */
.rw-card { position:relative; width:min(94vw, 31rem); overflow:hidden; box-sizing:border-box; padding:4.7rem 1.5rem 1.4rem; text-align:center;
  border:6px solid #000; border-radius:1.8rem; color:#fff6e0;
  background:radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--rw-b) 28%, var(--rw-c)) 0, var(--rw-c) 62%, #0a0614 100%);
  box-shadow:0 .9rem 0 #000, 0 0 6rem var(--rw-glow); animation:rwSlam .65s cubic-bezier(.2, 1.45, .4, 1) .05s both; }
.rw-card::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(255, 255, 255, .09) 1.2px, transparent 1.5px); background-size:14px 14px; }
.rw-set-halloween .rw-card::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background:radial-gradient(40% 30% at 20% 78%, var(--rw-mist), transparent 70%), radial-gradient(46% 34% at 82% 26%, var(--rw-mist2), transparent 70%); animation:rwMist 9s ease-in-out infinite alternate; }
@keyframes rwMist { from { transform:translate(-3%, 2%) scale(1); } to { transform:translate(3%, -2%) scale(1.12); } }
@keyframes rwSlam { 0% { transform:scale(.35) rotate(-6deg); opacity:0; } 60% { transform:scale(1.06) rotate(1deg); opacity:1; } 100% { transform:scale(1) rotate(0); } }
.rw-card > * { position:relative; z-index:1; }

.rw-shine { position:absolute !important; inset:0; z-index:3 !important; pointer-events:none; overflow:hidden; border-radius:inherit; }
.rw-shine::before { content:''; position:absolute; top:-20%; bottom:-20%; width:32%; left:-45%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent); animation:rwShine 3.8s ease-in-out 1.1s infinite; }
@keyframes rwShine { 0% { left:-45%; } 38%, 100% { left:130%; } }

.rw-ribbon { position:absolute !important; left:-.7rem; right:-.7rem; top:.95rem; transform:rotate(-2.2deg); z-index:2 !important; padding:.55rem .5rem .45rem;
  border:5px solid #000; background:linear-gradient(180deg, var(--rw-a), var(--rw-b)); box-shadow:0 .3rem 0 #000; animation:rwDrop .55s cubic-bezier(.2, 1.4, .4, 1) .35s both; }
.rw-ribbon span { display:block; font:400 clamp(1.15rem, 5vw, 1.6rem)/1 var(--font-display, 'Anton', sans-serif); letter-spacing:.09em; text-transform:uppercase; color:var(--rw-ink);
  text-shadow:0 2px 0 rgba(255, 255, 255, .45); }
@keyframes rwDrop { from { transform:translateY(-140%) rotate(-8deg); opacity:0; } to { transform:rotate(-2.2deg); opacity:1; } }

.rw-burst { position:absolute !important; right:.7rem; top:3.5rem; width:7.3rem; height:7.3rem; z-index:4 !important; display:grid; place-content:center; transform:rotate(11deg);
  color:var(--rw-ink); animation:rwPop .5s cubic-bezier(.2, 1.6, .4, 1) .9s both; }
.rw-burst::before, .rw-burst::after { content:''; position:absolute; inset:0; clip-path:polygon(50% 0, 60% 14%, 76% 6%, 80% 24%, 98% 24%, 90% 40%, 100% 54%, 84% 62%, 90% 80%, 72% 78%, 64% 96%, 50% 84%, 36% 96%, 28% 78%, 10% 80%, 16% 62%, 0 54%, 10% 40%, 2% 24%, 20% 24%, 24% 6%, 40% 14%); }
.rw-burst::before { background:#000; transform:scale(1.1); }
.rw-burst::after { background:var(--rw-a); }
.rw-burst span { position:relative; z-index:1; display:block; text-align:center; font-family:var(--font-display, 'Anton', sans-serif); text-transform:uppercase; line-height:1; }
.rw-burst-a { font-size:1.45rem; letter-spacing:.06em; } .rw-burst-b { font-size:.74rem; max-width:5.2rem; margin-top:.15rem; overflow-wrap:anywhere; text-wrap:balance; }
@keyframes rwPop { from { transform:scale(0) rotate(-40deg); opacity:0; } to { transform:rotate(11deg); opacity:1; } }

.rw-stage { position:relative; display:grid; place-items:center; height:min(12.5rem, 30vh); margin:.4rem 0 .2rem; }
.rw-glow { position:absolute; width:19rem; height:19rem; max-width:90%; border-radius:50%; background:radial-gradient(circle, var(--rw-glow), transparent 66%); animation:rwPulse 2.8s ease-in-out infinite; }
@keyframes rwPulse { 0%, 100% { transform:scale(.9); opacity:.75; } 50% { transform:scale(1.12); opacity:1; } }
.rw-hat { position:relative; width:min(84%, 17rem); animation:rwHatIn .8s cubic-bezier(.2, 1.4, .4, 1) .5s both, rwFloat 3.6s ease-in-out 1.4s infinite; }
.rw-hat svg { display:block; width:100%; height:auto; filter:drop-shadow(0 .45rem 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 1.4rem var(--rw-glow)); }
@keyframes rwHatIn { from { transform:scale(.2) translateY(2rem) rotate(-14deg); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes rwFloat { 0%, 100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-.6rem) rotate(1.2deg); } }

.rw-rarity { display:inline-block; margin:.1rem 0 .35rem; padding:.3rem .8rem .26rem; border:4px solid #000; border-radius:.6rem; background:linear-gradient(180deg, var(--rw-a), var(--rw-b)); color:var(--rw-ink);
  font:400 1rem/1 var(--font-display, 'Anton', sans-serif); letter-spacing:.14em; text-transform:uppercase; box-shadow:0 .2rem 0 #000; animation:rwUp .4s ease-out 1s both; }
.rw-stars { letter-spacing:.12em; }
.rw-name { margin:.1rem 0 .3rem; font:400 clamp(1.7rem, 7vw, 2.3rem)/1.05 var(--font-display, 'Anton', sans-serif); letter-spacing:.04em; text-transform:uppercase; color:#fff;
  text-shadow:0 .16rem 0 #000, 0 0 1.4rem var(--rw-glow), .13rem 0 0 #000, -.13rem 0 0 #000; animation:rwUp .4s ease-out 1.05s both; }
.rw-desc { margin:.2rem .4rem .5rem; font:600 .98rem/1.35 var(--font-body, 'Cabin', sans-serif); color:#f1e6d0; animation:rwUp .4s ease-out 1.1s both; }
.rw-source { display:inline-block; margin:.1rem 0 .7rem; padding:.28rem .8rem; border:3px solid #000; border-radius:999px; background:rgba(0, 0, 0, .45); font:700 .82rem/1 var(--font-body, sans-serif); letter-spacing:.06em; text-transform:uppercase; color:var(--rw-a); animation:rwUp .4s ease-out 1.15s both; }
.rw-worn { display:flex; align-items:center; justify-content:center; gap:.8rem; margin:.1rem 0 .9rem; font:600 .92rem var(--font-body, sans-serif); color:#e8dcc2; animation:rwUp .4s ease-out 1.2s both; }
.rw-avatar { width:4.6rem; height:4.6rem; flex:0 0 auto; border:4px solid #000; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .22), rgba(0, 0, 0, .35)); box-shadow:0 .2rem 0 #000; }
.rw-avatar svg { display:block; width:100%; height:100%; }
@keyframes rwUp { from { transform:translateY(.8rem); opacity:0; } to { transform:none; opacity:1; } }

.rw-actions { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; animation:rwUp .4s ease-out 1.25s both; }
.rw-btn { font:400 1.05rem/1 var(--font-display, 'Anton', sans-serif); letter-spacing:.07em; text-transform:uppercase; padding:.8rem 1.3rem .72rem; border:4px solid #000; border-radius:.8rem; background:#2c2a46; color:#fff6e0; cursor:pointer; box-shadow:0 .3rem 0 #000; }
.rw-btn:hover:not([disabled]) { filter:brightness(1.12); } .rw-btn:active:not([disabled]) { transform:translateY(2px); box-shadow:0 .12rem 0 #000; }
.rw-btn:focus-visible { outline:4px solid #fff; outline-offset:3px; }
.rw-btn[disabled] { opacity:.65; cursor:default; }
.rw-primary { background:linear-gradient(180deg, var(--rw-a), var(--rw-b)); color:var(--rw-ink); }

/* ============================ Évènements (fenêtre) ============================ */
.rw-evs-head, .rw-inv-head { margin:0 0 .8rem; font-weight:600; }
.rw-ev-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); gap:1rem; }
.rw-ev { position:relative; display:flex; flex-direction:column; border:4px solid #000; border-radius:1.1rem; overflow:hidden; color:#fff6e0;
  background:radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--rw-b) 24%, var(--rw-c)) 0, var(--rw-c) 62%, #0a0614 100%); box-shadow:0 .35rem 0 #000; }
.rw-ev-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem; padding:.45rem .8rem; border-bottom:4px solid #000; background:linear-gradient(180deg, var(--rw-a), var(--rw-b)); color:var(--rw-ink); }
.rw-ev-name { font:400 1.15rem/1 var(--font-display, sans-serif); letter-spacing:.09em; text-transform:uppercase; }
.rw-ev-until { font:700 .74rem/1 var(--font-body, sans-serif); text-transform:uppercase; letter-spacing:.06em; padding:.2rem .5rem; border:2px solid #000; border-radius:.4rem; background:rgba(255, 255, 255, .55); }
.rw-ev-main { display:flex; gap:.8rem; padding:.8rem .8rem .3rem; align-items:center; }
.rw-ev-art { flex:0 0 6.4rem; width:6.4rem; } .rw-ev-art svg { display:block; width:100%; height:auto; filter:drop-shadow(0 0 .8rem var(--rw-glow)); }
.rw-ev-info { min-width:0; }
/* « .dialog h3 » (le jeu) colore les titres en rouge foncé : on passe devant avec .rw-ev .rw-ev-item */
.rw-ev .rw-ev-item { margin:.3rem 0 .15rem; font:400 1.35rem/1.05 var(--font-display, sans-serif); letter-spacing:.03em; text-transform:uppercase; color:#fff; text-shadow:0 .12rem 0 #000; }
.rw-ev-desc { margin:0; font-size:.88rem; line-height:1.3; color:#ecdfc6; }
.rw-ev-conds { list-style:none; margin:.4rem .8rem; padding:.55rem .65rem; display:grid; gap:.5rem; border-radius:.7rem; background:rgba(0, 0, 0, .34); }
.rw-cond { display:grid; grid-template-columns:1.4rem 1fr auto; grid-template-areas:'c t n' 'c b b'; column-gap:.5rem; row-gap:.2rem; align-items:center; font-weight:700; font-size:.9rem; }
.rw-cond-check { grid-area:c; width:1.25rem; height:1.25rem; border:3px solid #000; border-radius:.35rem; background:rgba(255, 255, 255, .12); display:grid; place-items:center; font-size:.85rem; line-height:1; color:#10301c; }
.rw-cond-done .rw-cond-check { background:#6be08c; }
.rw-cond-text { grid-area:t; } .rw-cond-n { grid-area:n; font-variant-numeric:tabular-nums; color:var(--rw-a); }
.rw-bar { grid-area:b; height:.6rem; border:2px solid #000; border-radius:.4rem; background:rgba(0, 0, 0, .45); overflow:hidden; } .rw-bar i { display:block; height:100%; background:linear-gradient(90deg, var(--rw-b), var(--rw-a)); transition:width .5s ease; }
.rw-cond-free { display:block; font-weight:700; color:var(--rw-a); }
.rw-ev-foot { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:auto; padding:.6rem .8rem .8rem; }
.rw-ev-got, .rw-ev-todo { margin-right:auto; padding:.25rem .65rem; border:3px solid #000; border-radius:.5rem; font:400 .85rem/1 var(--font-display, sans-serif); letter-spacing:.1em; text-transform:uppercase; }
.rw-ev-got { background:#6be08c; color:#10301c; } .rw-ev-todo { background:rgba(0, 0, 0, .45); color:var(--rw-a); }
.rw-ev-owned { box-shadow:0 .35rem 0 #000, 0 0 1.4rem var(--rw-glow); }
.rw-empty { padding:1.6rem 1rem; text-align:center; border:3px dashed rgba(0, 0, 0, .35); border-radius:1rem; } .rw-empty p { margin:.2rem 0; }
.rw-empty-actions { display:flex; gap:.6rem; justify-content:center; margin-top:.8rem; }

/* ============================ Inventaire ============================ */
.rw-src { font-size:.74rem; font-weight:700; opacity:.8; }
.rw-cardbtn { margin-top:.25rem; }

/* ============================ Bouton « Évènements » : il se démarque ============================ */
.btn.rw-event-btn { position:relative; color:#fff; border-color:#000; text-shadow:0 2px 0 rgba(0, 0, 0, .55); overflow:visible;
  background:linear-gradient(110deg, #6a2db0 0%, #e0701a 38%, #ffb347 50%, #e0701a 62%, #6a2db0 100%); background-size:200% 100%; /* 200 % + fin d'animation à 200 % = exactement un tour du motif : la boucle est continue */
  box-shadow:0 .25rem 0 #000, 0 0 .9rem rgba(255, 150, 40, .55);
  /* Phase calée sur l'horloge (--rw-t1/2/3 = heure mod durée, posées par le jeu) : si le bouton est recréé (le bloc profil est refait), l'animation continue au même endroit au lieu de repartir de zéro. */
  animation:rwShimmer 3.2s linear calc(var(--rw-t1, 0ms) * -1) infinite; }
.btn.rw-event-btn:hover { filter:brightness(1.12); }
.btn.rw-event-btn .rw-event-ico { display:inline-block; margin-right:.35rem; animation:rwWiggle 2.4s ease-in-out calc(var(--rw-t2, 0ms) * -1) infinite; }
@keyframes rwShimmer { from { background-position:0% 0; } to { background-position:200% 0; } }
@keyframes rwWiggle { 0%, 100% { transform:rotate(0) scale(1); } 45% { transform:rotate(14deg) scale(1.2); } 60% { transform:rotate(-10deg) scale(1.1); } }
.rw-pill { position:absolute; top:-.55rem; right:-.5rem; min-width:1.3rem; height:1.3rem; padding:0 .3rem; box-sizing:border-box; display:grid; place-items:center; border:3px solid #000; border-radius:999px;
  background:#fff6e0; color:#2a1700; font:400 .78rem/1 var(--font-display, sans-serif); animation:rwBeat 1.5s ease-in-out calc(var(--rw-t3, 0ms) * -1) infinite; }
@keyframes rwBeat { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.22); } }

/* ============================ Animations coupées / réduites ============================ */
@media (prefers-reduced-motion: reduce) {
  .rw-root, .rw-card, .rw-rays, .rw-spark, .rw-shine::before, .rw-ribbon, .rw-burst, .rw-glow, .rw-hat, .rw-rarity, .rw-name, .rw-desc, .rw-source, .rw-worn, .rw-actions, .rw-set-halloween .rw-card::after, .btn.rw-event-btn, .rw-event-ico, .rw-pill { animation:none !important; }
  .rw-spark { opacity:.8; }
}
html.no-anim .rw-root, html.no-anim .rw-card, html.no-anim .rw-rays, html.no-anim .rw-spark, html.no-anim .rw-shine::before, html.no-anim .rw-ribbon, html.no-anim .rw-burst, html.no-anim .rw-glow, html.no-anim .rw-hat, html.no-anim .rw-rarity, html.no-anim .rw-name, html.no-anim .rw-desc, html.no-anim .rw-source, html.no-anim .rw-worn, html.no-anim .rw-actions, html.no-anim .rw-set-halloween .rw-card::after, html.no-anim .btn.rw-event-btn, html.no-anim .rw-event-ico, html.no-anim .rw-pill { animation:none !important; }
html.no-anim .rw-spark { opacity:.8; }
@media (max-width: 520px) { .rw-card { padding-top:4.4rem; } .rw-burst { right:.4rem; top:3.6rem; width:6.2rem; height:6.2rem; } .rw-ev-list { grid-template-columns:1fr; } }