/* Animação de recompensa recebida (recompensa.js). Fora do combate apenas. O movimento vem do GSAP; aqui só o visual. */
.rewardFx { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 38%, #2a1646f0, #07040dfa 70%); }
.rewardFx.out { opacity: 0; transform: scale(1.03); transition: opacity .3s ease-in, transform .3s ease-in; }
.rwFx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.rwRays { position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none; width: 160vmax; height: 160vmax; translate: -50% -50%; background: repeating-conic-gradient(from 0deg, #ffd36b1f 0 4deg, transparent 4deg 15deg); -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 46%); mask: radial-gradient(circle, #000 0 8%, transparent 46%); animation: rwSpin 40s linear infinite; }
.rwBox { position: relative; z-index: 3; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 0 20px; max-width: min(96vw, 860px); }
.rwEclipse { position: relative; width: 150px; height: 150px; margin-bottom: 4px; }
.rwEclipse i { position: absolute; border-radius: 50%; }
.rwCorona { inset: -26px; background: radial-gradient(circle, transparent 52%, #ffe7a8 56%, #ffb347 62%, #c9582a66 72%, transparent 80%); filter: blur(5px); }
.rwDisc { inset: 18px; background: radial-gradient(circle at 40% 35%, #26163a, #05030a 70%); box-shadow: 0 0 0 3px #05030a, 0 0 40px 6px #ffd36baa, inset 0 0 22px #000; }
.rwRing { inset: 0; border: 2px solid #ffe7a8aa; box-shadow: 0 0 22px #ffd36b88, inset 0 0 22px #ffd36b44; }
.rwKicker { font: 700 13px/1 system-ui, sans-serif; letter-spacing: .34em; color: #e8c98b; }
.rwTitle { margin: 0; font: 700 clamp(26px, 4.6vw, 44px)/1.1 'Grenze Gotisch', Georgia, serif; color: #fff3d6; text-shadow: 0 2px 12px #000, 0 0 26px #e8c98b66; }
.rwItems { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; perspective: 900px; }
.rwCard { --c1: #ffe7a8; --c2: #c98f2a; --glow: #ffd36b; width: clamp(130px, 22vw, 168px); aspect-ratio: 5 / 7; }
.rwFace { position: relative; height: 100%; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 14px 10px; overflow: hidden; border: 2px solid var(--c2); background: linear-gradient(160deg, #2a1a40, #0e0817 70%); box-shadow: 0 0 0 1px #05030a, 0 0 26px -2px var(--glow), 0 18px 34px -10px #000; }
.rwFace::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--c1) 55%, transparent); pointer-events: none; }
.rwFace::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--glow) 38%, transparent), transparent 62%); pointer-events: none; }
.rwShine { position: absolute; inset: -40%; background: linear-gradient(105deg, transparent 42%, #ffffff55 50%, transparent 58%); translate: -60% 0; animation: rwShine 2.6s 1.8s ease-in-out infinite; z-index: 2; pointer-events: none; }
.rwIcon { position: relative; z-index: 1; display: grid; place-items: center; height: 72px; margin-bottom: 4px; filter: drop-shadow(0 4px 8px #000a); }
.rwIcon .coin, .rwIcon .gem { font-size: 58px; }
.rwCard b { position: relative; z-index: 1; font: 800 clamp(30px, 5vw, 42px)/1 'Segoe UI', system-ui, sans-serif; color: var(--c1); text-shadow: 0 2px 0 #00000088, 0 0 18px var(--glow); font-variant-numeric: tabular-nums; }
.rwLabel { position: relative; z-index: 1; font: 700 12px/1.2 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #e6dcf0; }
.rw-gem { --c1: #c8f4ff; --c2: #3aa9d8; --glow: #5fd4f5; }
.rw-pack { --c1: #f0dcff; --c2: #9b59e6; --glow: #b86cf2; }
.rw-xp { --c1: #fff3d6; --c2: #d9a441; --glow: #ffcf6b; }
.rwPack { position: relative; display: block; width: 44px; height: 58px; background: linear-gradient(135deg, #ffd36b, #b86cf2 55%, #4fd6cf); border: 2px solid #fff3d6; box-shadow: 0 0 16px #b86cf2aa; clip-path: polygon(0 6%, 8% 0, 16% 6%, 24% 0, 32% 6%, 40% 0, 48% 6%, 56% 0, 64% 6%, 72% 0, 80% 6%, 88% 0, 96% 6%, 100% 0, 100% 100%, 0 100%); }
.rwPack b { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; font-size: 0; background: #fff3d6; transform: rotate(45deg) scale(.7); box-shadow: 0 0 8px #fff; }
.rwXp { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font: 800 20px/1 system-ui; color: #2a1606; background: linear-gradient(180deg, #ffd77a, #c98f2a); border: 3px solid #ffe7a8; box-shadow: 0 0 18px #ffd36b99; }
.rwOk { margin-top: 14px; padding: 13px 40px; border: 1px solid #ffe7a8; background: linear-gradient(180deg, #ffd77a, #c98f2a 60%, #8a5a12); color: #2a1606; font: 800 16px/1 system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; box-shadow: 0 8px 22px #000a; }
.rwOk:hover { filter: brightness(1.1); }
@keyframes rwSpin { to { rotate: 360deg; } }
@keyframes rwShine { 0% { translate: -60% 0; } 55%, 100% { translate: 60% 0; } }
.rewardFx.calm .rwRays, .rewardFx.calm .rwFx, .rewardFx.calm .rwShine { display: none; }
@media (prefers-reduced-motion: reduce) { .rwRays, .rwFx, .rwShine { display: none; } .rewardFx.out { transition: none; } }