/* ============================================================ ACHIEVEMENT SYSTEM 🏆 — estilos Combina com o tema do site (usa suas variáveis :root). Inclua no de todas as páginas: ============================================================ */ /* ---------- BOTÃO TROFÉU (gif personalizado) ---------- */ #achv-trophy { /* remove toda a cara de botão: só o gif aparece */ background: none; border: none; padding: 0; } #achv-trophy img { width: 30px; height: auto; display: block; image-rendering: pixelated; transition: transform 0.3s ease, filter 0.2s ease; } /* hover: só cresce, sem entortar 🌸 */ #achv-trophy:hover img { transform: scale(1.18); filter: drop-shadow(2px 4px 5px var(--pinkshad2)); } #achv-trophy:active img { transform: scale(1.05); } #achv-trophy.glow img { animation: achvGlow 1.2s ease-in-out infinite; } @keyframes achvGlow { 0%, 100% { filter: drop-shadow(2px 3px 3px var(--shadow)) drop-shadow(0 0 3px var(--pinkgrad)); } 50% { filter: drop-shadow(2px 3px 3px var(--shadow)) drop-shadow(0 0 10px var(--pinkgrad)); } } #achv-trophy.in-slot { position: static; } #trophy-slot { display: flex; justify-content: flex-end; /* ou center / flex-start, onde ficar melhor */ padding: 2px; } /* pulse suave, contínuo e discreto no troféu */ #achv-trophy { animation: softPulse 2.0s ease-in-out infinite; } #achv-trophy:hover { animation-play-state: paused; /* no hover, o crescimento assume */ } @keyframes softPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ---------- OVERLAY + MODAL ---------- */ #achv-overlay { position: fixed; inset: 0; z-index: 9991; background: var(--background); backdrop-filter: blur(1px); display: none; align-items: center; justify-content: center; } #achv-overlay.open { display: flex; } #achv-modal { width: 340px; max-height: 75vh; display: flex; flex-direction: column; background: white; border: 1px solid var(--pinkshad); border-radius: 5px; box-shadow: 0px 0px 10px 0px var(--pinkshad2), 0px 5px 0px 0px var(--shadow), inset 0px 0px 0px 2px var(--pinkhigh); animation: achvModalPop 0.25s ease; } @keyframes achvModalPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* barra de título — mesmo estilo dos seus headers rosa */ .achv-titlebar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--pinkshad); background: var(--pink); box-shadow: inset 0px -12px 0px 0px var(--pinkgrad), inset 0px 0px 0px 2px var(--pink), inset 0px 2px 0px 2px var(--pinkhigh); color: white; font-weight: bolder; text-shadow: 1px 1px var(--pinkshad), 0px 1px var(--pinkshad), 1px 0px var(--pinkshad), 0px -1px var(--pinkshad), -1px 0px var(--pinkshad), -1px -1px var(--pinkshad), 1px -1px var(--pinkshad), -1px 1px var(--pinkshad); } .achv-titlebar p { margin: 5px; font-size: small; font-family: 'MS UI Gothic'; } #achv-close { margin: 3px; width: 22px; height: 18px; font-size: 9px; color: #ff39b3; background: var(--pink); border-top: 2px solid var(--pinkhigh); border-left: 2px solid var(--pinkhigh); border-right: 2px solid var(--p-outline); border-bottom: 2px solid var(--p-outline); } #achv-close:active { border: 2px inset var(--pinkhigh); } /* ---------- PROGRESSO ---------- */ .achv-progress { padding: 8px 10px; border-bottom: 1px dotted var(--pink); } .achv-progress-text { font-family: "Press Start 2P"; font-size: 6px; text-transform: uppercase; color: var(--pinkgrad); margin-bottom: 5px; text-align: center; } .achv-progress-bar { height: 10px; background: var(--pinkhigh); border: 1px solid var(--pink); border-radius: 10px; overflow: hidden; } #achv-progress-fill { height: 100%; width: 0%; background: linear-gradient(to bottom, var(--p-catchlight), var(--pinkgrad)); transition: width 0.6s ease; } /* ---------- LISTA ---------- */ #achv-list { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; background-image: url("https://www.hellomei.dev/images/assets/backgrounds/grid.png"); } .achv-item { display: flex; gap: 8px; align-items: center; background: white; border: 1px solid rgb(255, 149, 193); border-radius: 5px; padding: 6px; box-shadow: 0px 2px 0px 0px rgb(240, 212, 222); } .achv-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; } .achv-title { font-family: 'MS UI Gothic'; font-size: 13px; font-weight: bold; color: var(--pinkgrad); } .achv-desc { font-family: 'MS UI Gothic'; font-size: 11px; color: var(--lightblack); } /* bloqueada = cinza e apagadinha */ .achv-item.locked { filter: grayscale(1); opacity: 0.55; } /* recém-desbloqueada = animação de destaque ao abrir o log */ .achv-item.new { animation: achvNewPop 0.6s ease; } @keyframes achvNewPop { 0% { transform: scale(0.85); box-shadow: 0 0 0px var(--pinkgrad); } 50% { transform: scale(1.05); box-shadow: 0 0 14px var(--pinkgrad); } 100% { transform: scale(1); box-shadow: 0px 2px 0px 0px rgb(240, 212, 222); } } /* ---------- TOASTS ---------- */ #achv-toasts { position: fixed; bottom: 65px; right: 15px; z-index: 9992; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .achv-toast { display: flex; gap: 8px; align-items: center; width: 230px; background: white; border: 1px solid var(--pinkshad); border-radius: 5px; padding: 8px; box-shadow: 0px 0px 10px 0px var(--pinkshad2), inset 0px 0px 0px 2px var(--pinkhigh); /* estado inicial: fora da tela */ transform: translateX(120%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; } .achv-toast.show { transform: translateX(0); opacity: 1; } .achv-toast-icon { font-size: 24px; flex-shrink: 0; } .achv-toast-header { font-family: "Press Start 2P"; font-size: 5px; text-transform: uppercase; color: white; text-shadow: var(--pinkshad) 1px 1px 1px; background-color: var(--pink); border-radius: 3px; padding: 2px 3px; width: fit-content; margin-bottom: 3px; } .achv-toast-title { font-family: 'MS UI Gothic'; font-size: 13px; font-weight: bold; color: var(--pinkshad); } .achv-toast-desc { font-family: 'MS UI Gothic'; font-size: 10px; color: var(--lightblack); }