style.css

/* DNA Pet Base Styles */
.dna-pet {
    position: absolute;
    width: 24px;
    height: 24px;
    z-index: 99999999 !important;
    pointer-events: auto;
    cursor: help;
    transition: left 1s cubic-bezier(0.45, 0.05, 0.55, 0.95), top 1s cubic-bezier(0.45, 0.05, 0.55, 0.95), filter 0.5s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Overrides */
.js-yearly-contributions, .js-calendar-graph, .js-calendar-graph-svg,
.ContributionCalendar, .ContributionCalendar-grid, .ContributionCalendar-content,
[data-graph-url], .Box, svg.js-calendar-graph-svg {
    overflow: visible !important;
    contain: none !important;
}

/* Ground Shadow */
.pet-shadow {
    position: absolute;
    width: 16px;
    height: 4px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    bottom: -2px;
    left: 4px;
    z-index: -1;
}

.pet-visual {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: pet-idle 3s infinite ease-in-out;
    transition: transform 0.3s, filter 0.3s;
    background-color: var(--pet-color, #ff3388);
    background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 60%);
    border: 1px solid rgba(255,255,255,0.4);
    box-sizing: border-box;
    overflow: hidden; 
}

.dna-pet.is-moving .pet-visual {
    animation: pet-hop 0.5s infinite ease-in-out;
}

.dna-pet.is-eating .pet-visual {
    animation: pet-eat 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pet-eat {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.4) translateY(-2px); filter: brightness(1.6); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Wiggle Mutation */
.dna-pet.mut-wiggle .pet-visual {
    animation: pet-wiggle 0.3s infinite ease-in-out;
}
@keyframes pet-wiggle {
    0%, 100% { transform: rotate(-3deg) scale(1.02, 0.98); }
    50% { transform: rotate(3deg) scale(0.98, 1.02); }
}

/* --- TIER EFFECTS --- */
.dna-pet.tier-1 { filter: drop-shadow(0 0 1px rgba(255,255,255,0.2)); }
.dna-pet.tier-2 { filter: drop-shadow(0 0 2px rgba(255,255,255,0.3)); }
.dna-pet.tier-3 { filter: none; }

/* --- PATTERNS --- */
.pet-visual.pat-stripes { background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.2) 5px, rgba(255,255,255,0.2) 10px); }
.pet-visual.pat-dots { background-image: radial-gradient(rgba(255,255,255,0.3) 20%, transparent 20%); background-size: 6px 6px; }
.pet-visual.pat-circuit { background-image: linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 8px 8px; }
.pet-visual.pat-gradient-shift { background-image: linear-gradient(135deg, rgba(255,255,255,0.3), transparent); animation: grad-shift 5s infinite alternate; }
.pet-visual.pat-honeycomb { background-image: radial-gradient(circle, rgba(255,255,255,0.1) 20%, transparent 80%); background-size: 10px 10px; background-position: 0 0, 5px 5px; }
.pet-visual.pat-star-field { background-image: radial-gradient(white 1px, transparent 1.5px); background-size: 8px 8px; }
.pet-visual.pat-waves { background-image: radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,0.2) 21%, transparent 35%); background-size: 8px 8px; }
.pet-visual.pat-lava { background-image: radial-gradient(circle, rgba(255,255,255,0.4) 10%, transparent 80%); background-size: 8px 8px; animation: lava-flow 4s infinite linear; }
.pet-visual.pat-glitch-static { background-image: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.2) 0deg 90deg, transparent 90deg 180deg); background-size: 2px 2px; animation: glitch-static 0.1s infinite; }

/* Face */
.pet-face { 
    position: absolute; 
    top: 35%; 
    left: 50%; 
    width: 14px; /* Fixed width for consistent eye spacing */
    height: 8px; 
    transform: translateX(-50%);
    z-index: 500; 
    pointer-events: none; 
}
.pet-eyes { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    position: relative; 
}

/* Eyes & Pupils */
.pet-eye {
    width: 6px; /* Slightly smaller for better fit */
    height: 6px;
    background: #000;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    animation: pet-blink 4s infinite;
}

.pet-pupil {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--look-x, 0px)), calc(-50% + var(--look-y, 0px)));
    transition: transform 0.2s ease-out;
    box-shadow: 0 0 3px #fff;
}

/* --- EYE TYPES (Refined for 6px circle) --- */
.eye-type-large .pet-pupil { width: 4px; height: 4px; }

.eye-type-angry::before { 
    content: ''; position: absolute; top: -1px; left: -1px; width: 130%; height: 35%; 
    background: var(--pet-color); z-index: 10; transform: rotate(-15deg); 
}
.eye-type-angry.eye-right::before { transform: rotate(15deg); }

.eye-type-cute .pet-pupil::after { 
    content: ''; position: absolute; top: 0.5px; left: 0.5px; width: 1px; height: 1.5px; 
    background: #fff; border-radius: 50%; filter: blur(0.1px); 
}

.eye-type-robot { border-color: #0f0; }
.eye-type-robot .pet-pupil { background: #0f0; box-shadow: 0 0 4px #0f0; width: 2.5px; height: 2.5px; }

.eye-type-googly { animation: googly-shake 0.5s infinite; }
@keyframes googly-shake { 0%, 100% { transform: translate(0,0); } 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }

@keyframes pet-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

.pet-eyes.is-winking .eye-right {
    animation: none;
    transform: scaleY(0.1);
    opacity: 0.5;
}

.pet-face::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: radial-gradient(circle, rgba(255,100,100,0.6) 0%, transparent 70%); background-size: 6px 4px; background-repeat: space; opacity: 0.8; }

/* Bodies */
.pet-visual.body-slime { border-radius: 40% 40% 30% 30%; }
.pet-visual.body-cube { border-radius: 4px; }
.pet-visual.body-wisp { border-radius: 50%; filter: brightness(1.2) blur(1px); animation: wisp-flicker 1s infinite alternate; }
.pet-visual.body-orb { border-radius: 50%; box-shadow: inset -4px -4px 8px rgba(0,0,0,0.2), inset 4px 4px 8px rgba(255,255,255,0.5); }
.pet-visual.body-crystal { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.pet-visual.body-pyramid { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.pet-visual.body-cloud { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
.pet-visual.body-ghost { border-radius: 50% 50% 0 0; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80% 85%, 60% 100%, 40% 85%, 20% 100%, 0% 85%); opacity: 0.9; }
.pet-visual.body-dragon-egg { border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; }

/* Mecha-Spider */
.pet-visual.body-mecha-spider { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.pet-leg { position: absolute; width: 10px; height: 3px; background: #333; z-index: -1; transform-origin: left center; border-radius: 2px; }
.leg-1 { top: 20%; left: -4px; transform: rotate(150deg); }
.leg-2 { top: 80%; left: -4px; transform: rotate(210deg); }
.leg-3 { top: 20%; right: -4px; transform: rotate(-30deg); transform-origin: right center; }
.leg-4 { top: 80%; right: -4px; transform: rotate(30deg); transform-origin: right center; }

/* --- MUTATIONS (HIGH Z-INDEX) --- */
.pet-mutation { position: absolute; background-color: var(--pet-color); z-index: 1000; filter: brightness(1.1); border: 1px solid rgba(255,255,255,0.3); }
.mut-horns { top: -10px; left: 0; width: 100%; height: 12px; clip-path: polygon(15% 100%, 25% 0%, 35% 100%, 65% 100%, 75% 0%, 85% 100%); z-index: -1; animation: horns-wiggle 3s infinite ease-in-out; transform-origin: center bottom; }
@keyframes horns-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

.mut-halo { top: -14px; left: 5%; width: 90%; height: 5px; border-radius: 50%; background: #ffff00 !important; box-shadow: 0 0 15px #ffff00; border: none; animation: halo-float 2s infinite ease-in-out; }
@keyframes halo-float { 0%, 100% { transform: translateY(0) rotateX(60deg); } 50% { transform: translateY(-3px) rotateX(60deg); } }

.mut-bat-wings { top: 5%; left: -15px; width: 54px; height: 18px; background: #1a1a1a !important; clip-path: polygon(0% 0%, 25% 50%, 0% 100%, 50% 70%, 100% 100%, 75% 50%, 100% 0%, 50% 30%); z-index: -2; border: none; filter: none !important; animation: wings-flap 0.8s infinite ease-in-out; }

.mut-spikes { width: 140%; height: 140%; top: -20%; left: -20%; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: rgba(255,255,255,0.4) !important; z-index: -1; border: none; animation: spikes-pulse 4s infinite ease-in-out; }
@keyframes spikes-pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } }

.mut-tail { bottom: -6px; right: -6px; width: 12px; height: 12px; clip-path: polygon(0% 100%, 100% 0%, 100% 100%); z-index: -3; animation: tail-wag 1.5s infinite ease-in-out; transform-origin: left top; }
@keyframes tail-wag { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(20deg); } }

.mut-fins { left: -6px; width: 36px; height: 12px; background: inherit; clip-path: polygon(0% 50%, 20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%); z-index: -2; animation: fins-wiggle 2s infinite ease-in-out; }
@keyframes fins-wiggle { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.1); } }

.mut-antenna { top: -12px; left: 50%; width: 2px; height: 12px; transform: translateX(-50%); background: #000 !important; border: none; animation: antenna-wiggle 1s infinite ease-in-out; transform-origin: center bottom; }
@keyframes antenna-wiggle { 0%, 100% { transform: translateX(-50%) rotate(0deg); } 25% { transform: translateX(-50%) rotate(-10deg); } 75% { transform: translateX(-50%) rotate(10deg); } }
.mut-antenna::after { content: ''; position: absolute; top: -3px; left: -2px; width: 6px; height: 6px; background: inherit; border-radius: 50%; }

.mut-shield { left: -10px; top: 15%; width: 8px; height: 14px; background: #bdc3c7 !important; border-radius: 0 0 4px 4px; animation: shield-defend 4s infinite ease-in-out; }
@keyframes shield-defend { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px) rotate(-5deg); } }

.mut-sword { right: -10px; top: 10%; width: 4px; height: 20px; background: #ecf0f1 !important; clip-path: polygon(50% 0%, 100% 80%, 50% 100%, 0% 80%); animation: sword-swing 3s infinite ease-in-out; transform-origin: center bottom; }
@keyframes sword-swing { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(35deg); } }

.mut-magic-wand { right: -10px; top: 5%; width: 3px; height: 16px; background: #9b59b6 !important; transform: rotate(15deg); animation: wand-cast 2s infinite ease-in-out; }
.mut-magic-wand::after { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; background: rgba(155, 89, 182, 0.6); border-radius: 50%; filter: blur(2px); animation: wand-glow 1s infinite alternate; }
@keyframes wand-cast { 0%, 100% { transform: rotate(15deg) translateY(0); } 50% { transform: rotate(25deg) translateY(-2px); } }
@keyframes wand-glow { from { opacity: 0.4; transform: scale(0.8); } to { opacity: 1; transform: scale(1.3); } }

.mut-angel-wings { top: -5px; left: -20px; width: 64px; height: 24px; background: #fff !important; clip-path: polygon(0% 50%, 20% 0%, 50% 20%, 80% 0%, 100% 50%, 80% 100%, 50% 80%, 20% 100%); opacity: 0.9; z-index: -2; animation: wings-flap 3s infinite ease-in-out; border: none; }
.mut-demon-wings { top: -5px; left: -20px; width: 64px; height: 24px; background: #800 !important; clip-path: polygon(0% 0%, 20% 40%, 0% 100%, 50% 70%, 100% 100%, 80% 40%, 100% 0%, 50% 30%); z-index: -2; animation: wings-flap 1.5s infinite ease-in-out; border: none; }
@keyframes wings-flap { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(0.5) translateY(2px); } }

.mut-hover-bots::before, .mut-hover-bots::after { content: '🤖'; position: absolute; font-size: 8px; z-index: 2000; animation: bot-orbit 4s infinite linear; }
.mut-hover-bots::after { animation-delay: -2s; }
@keyframes bot-orbit { 
    0% { transform: translate(-15px, -5px) scale(1); z-index: 2000; }
    25% { transform: translate(0px, 5px) scale(0.8); }
    50% { transform: translate(15px, -5px) scale(1); z-index: -1; }
    75% { transform: translate(0px, -15px) scale(1.2); }
    100% { transform: translate(-15px, -5px) scale(1); z-index: 2000; }
}

.mut-leafy-tail { bottom: -8px; right: -8px; width: 15px; height: 15px; background: #2ecc71 !important; clip-path: polygon(0% 100%, 100% 0%, 70% 100%); animation: tail-wag 2s infinite ease-in-out; transform-origin: left bottom; }

.mut-gem-core { top: 35%; left: 35%; width: 30%; height: 30%; background: #fff !important; border-radius: 50%; box-shadow: 0 0 15px #fff; z-index: 600; animation: core-resonate 2s infinite ease-in-out; border: none; }
@keyframes core-resonate { 
    0%, 100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 10px #fff; } 
    50% { transform: scale(1.2); filter: brightness(1.5); box-shadow: 0 0 25px #fff; } 
}

.mut-beard { bottom: -8px; left: 10%; width: 80%; height: 10px; background: #444 !important; clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 70% 80%, 50% 100%, 30% 80%, 10% 100%); z-index: 5; opacity: 0.9; border: none; animation: beard-wiggle 4s infinite ease-in-out; }
@keyframes beard-wiggle { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.1) skewX(2deg); } }

.mut-mustache { top: 55%; left: 20%; width: 60%; height: 4px; background: #222 !important; clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 80%); z-index: 110; border: none; animation: mustache-wiggle 3s infinite ease-in-out; }
@keyframes mustache-wiggle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1, 0.9); } }

/* --- ACCESSORIES (VERY HIGH Z-INDEX) --- */
.pet-accessory { position: absolute; z-index: 1500; filter: brightness(1.1); }
.acc-hat { top: -8px; left: 5%; width: 90%; height: 10px; background: #e74c3c !important; border-radius: 10px 10px 2px 2px; box-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.acc-scarf { bottom: -2px; left: 0; width: 100%; height: 8px; background: #3498db !important; border-radius: 0 0 6px 6px; border-top: 1px solid rgba(0,0,0,0.2); }
.acc-glasses { top: 25%; left: 0; width: 100%; height: 12px; background: rgba(255,255,255,0.2) !important; border-top: 2px solid #000; border-bottom: 2px solid #000; z-index: 2000; }
.acc-crown { top: -12px; left: 0; width: 100%; height: 12px; background: #f1c40f !important; clip-path: polygon(0% 100%, 0% 0%, 25% 50%, 50% 0%, 75% 50%, 100% 0%, 100% 100%); }
.acc-wizard-hat { top: -18px; left: -10%; width: 120%; height: 20px; background: #4b0082 !important; clip-path: polygon(50% 0%, 20% 80%, 0% 100%, 100% 100%, 80% 80%); }
.acc-cyber-mask { top: 15%; left: -5%; width: 110%; height: 70%; background: rgba(0,255,204,0.3) !important; border: 2px solid #00ffcc; z-index: 2500; backdrop-filter: blur(1px); border-radius: 4px; }
.acc-cape { top: 20%; left: -10%; width: 120%; height: 100%; background: #c0392b !important; clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 50% 80%, 0% 100%); z-index: -5; opacity: 0.9; }

/* --- MOODS --- */
.dna-pet.mood-scared .pet-visual { animation: pet-shiver 0.15s infinite; filter: saturate(0.4) brightness(0.8); }
.dna-pet.mood-ecstatic .pet-visual { animation: pet-idle 0.8s infinite ease-in-out; filter: brightness(1.2) contrast(1.1); }

/* --- AURAS (Allow dynamic glow) --- */
.pet-visual.aura-rainbow { animation: aura-rainbow 3s linear infinite; border: 2px solid #fff !important; }
@keyframes aura-rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.pet-visual.aura-stars::after { content: '✨'; position: absolute; font-size: 8px; animation: aura-stars 2s infinite; }
@keyframes aura-stars { 0% { transform: translate(-10px, -10px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(10px, -20px); opacity: 0; } }
.pet-visual.aura-fire { border: 2px solid #ffcc00 !important; }
.pet-visual.aura-plasma { animation: plasma 2s infinite alternate; border: 2px solid #fff !important; }
@keyframes plasma { from { filter: brightness(1); } to { filter: brightness(1.5) contrast(1.2); } }
.pet-visual.aura-leaves::after { content: '🍃'; position: absolute; font-size: 10px; animation: leaves 3s infinite linear; }
@keyframes leaves { 0% { transform: rotate(0deg) translate(20px) rotate(0deg); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(360deg) translate(20px) rotate(-360deg); opacity: 0; } }
.pet-visual.aura-void { background: #000 !important; border: 1px solid #444 !important; }
.pet-visual.aura-nebula { background: linear-gradient(45deg, #ff00ff, #00ffff) !important; animation: nebula-spin 10s infinite linear; }
@keyframes nebula-spin { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

/* Tooltip & Speech */
.dna-pet-tooltip { visibility: hidden; width: 180px; background-color: #0d1117; color: #c9d1d9; text-align: center; border-radius: 8px; padding: 12px; position: absolute; z-index: 100000000; bottom: 160%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.2s; font-size: 11px; border: 1px solid #30363d; box-shadow: 0 10px 30px rgba(0,0,0,0.5); line-height: 1.4; }
.dna-pet:hover .dna-pet-tooltip { visibility: visible; opacity: 1; }
@keyframes wisp-flicker { from { opacity: 0.8; transform: scale(0.95); } to { opacity: 1; transform: scale(1.05); } }